ImportPackage Command
ImportPackage
requires APL 2024.3 or later. Provide an alternate experience for devices running older versions of APL.
Imports an Alexa Presentation Language (APL) package and its dependencies into the current document and then run commands after the package has been imported.
Properties
The ImportPackage command has the following properties in addition to the standard command properties:
Property | Type | Default | Description |
---|---|---|---|
|
String |
|
Package |
|
String |
REQUIRED |
Package |
|
Array of Commands |
[] |
Commands to run if the package fails to load. |
|
Array of Commands |
[] |
Commands to run if the package loads. |
|
String |
"" |
Optional package |
|
String |
REQUIRED |
Package |
The accept
, name
, version
, and source
properties use the definitions provided in Package reference.
The following example shows a command to import a package called FishFeeder
.
{
"type": "ImportPackage",
"name": "FishFeeder",
"version": "1.2.0",
"accept": ">=1.2 <2",
"onLoad": [ <COMMANDS_TO_RUN> ],
"onFail": [ <COMMANDS_TO_RUN> ]
}
The ImportPackage
command is ignored in fast mode.
onFail
An array of commands to run if the package or any dependent packages fail to load. Packages are never reloaded. If a package failed to load in the past the onFail
event handler is immediately invoked.
The event generated has the following form.
"event" {
"source": {
"type": COMPONENT_TYPE, // The type of the component (e.g., "TouchWrapper")
"handler": "Fail",
... // Component source properties
},
"value": STRING, // The name, version, and URL of the package that faiiled to load
"error": STRING, // The reason of the failure
"errorCode": NUMBER // Error identifier
}
The value
, error
, and errorCode
reported in the event are provided for debugging. Don't show these values to the customer.
Refer to Event source for a description of event.source
properties.
The onFail
event handler runs in fast mode.
onLoad
An array of commands to run when the package and all dependent packages have loaded. If the packages have already been loaded into the document this command runs immediately.
The event generated has the following form.
"event": {
"source": {
"type": COMPONENT_TYPE, // The type of the component (e.g., "TouchWrapper")
"handler": "Load",
... // Component source properties
},
"version": STRING, // The version of the loaded package
}
The version
property is the version
of the package that was loaded.
Refer to Event source for a description of event.source
properties.
The onLoad
event handler runs in fast mode.
ImportPackage command and the document import property
The imported package can contain the document import
property, which identifies additional packages to load. Alexa doesn't load packages more than one time. If a package has already been loaded, that package is ignored. A package is defined by its name
and version
tuple. Therefore, the following two packages are not the same:
{"name": "A", "version": "1.1.0"}
{"name": "A", "version": "1.1.1"}
(The version number is different).
If you request the 1.1.1
version of A
after the 1.1.0
version has loaded, the 1.1.1
version does load and overrides the 1.1.0
version.
After the package has been loaded and all internally referenced packages have been loaded, the commands, graphics, layouts, resources, and styles are processed and added to the core document context. The onLoad
commands run after processing. If any package fails to load, the onFail
commands run.
The following properties are read from the imported package:
type
: Must beAPL
version
: Must be a supported APL versioncommands
graphics
import
layouts
resources
styles
The Reinflate command doesn't save imported packages. The document reloads without the packages that were previously loaded with the ImportPackage
command.
ImportPackage
commands and because those versions might contain subtle conflicts, use the accept
property whenever possible to minimize loading of packages with conflicting versions.Examples
You can use the ImportPackage
command to delay loading lower-priority packages, but still minimize the time to display elements that rely on those packages.
The following example uses the document onMount
event handler to start a background load of the "FishGraphics" package. Later in the document, when the user presses a button, the document uses ImportPackage
to import the FishGraphics
package. The onLoad
event handler then displays the graphic from the package. If the FishGraphics
package has already been loaded, the onLoad
handler runs immediately and therefore the SetValue
command immediately displays the graphic. If FishGraphics
hasn't finished loading, the onLoad
handler runs after the package has loaded. This ensures that the package is available before attempting to display the graphic.
{
"type": "APL",
"version": "2024.3",
"onMount": {
"type": "ImportPackage",
"name": "FishGraphics",
"version": "1.2.0",
"accept": ">=1.2.0",
"sequencer": "FishGraphicLoader"
},
"onPress": {
"type": "ImportPackage",
"name": "FishGraphics",
"version": "1.2.0",
"accept": ">=1.2.0",
"onLoad": {
"type": "SetValue",
"componentId": "MY_FISH_GRAPHIC",
"property": "source",
"value": "HappyTunaGraphic"
},
"onFail": {
"type": "SetValue",
"componentId": "USER_MESSAGE",
"property": "text",
"value": "Unable to load fish pictures!"
}
}
}
Another common use is a list of items where the items in the list should be displayed immediately as a placeholder until the actual item loads. The following example places a blank Frame
component in the list. The actual item to display inflates into the Frame
after the package has loaded.
{
"type": "APL",
"version": "2024.3",
"layouts": {
"EnsureFishFeeder": {
"parameters": [],
"items": {
"type": "Frame",
"onMount": {
"type": "ImportPackage",
"sequencer": "DelayedLoader_${event.source.uid}",
"name": "FishFeeder",
"version": "1.2.0",
"onLoad": {
"type": "InsertItem",
"item": {
"type": "FishFeederLayout",
"numberOfFish": "${data.fish_count}",
"tankSize": "${data.tank_size}"
}
}
}
}
}
},
"mainTemplate": {
"items": {
"type": "Container",
"item": {
"type": "EnsureFishFeeder"
},
"data": [
{
"fish_count": 12,
"tank_size": "SMALL"
},
{
"fish_count": 18,
"tank_size": "MEDIUM"
},
{
"fish_count": 87,
"tank_size": "LARGE"
}
]
}
}
}
The following example shows a generic package loader that inspects the object to be inserted and determines if it depends on a package.
{
"type": "APL",
"version": "2024.3",
"layouts": {
"PackageWrapper": {
"parameters": [
"DATA"
],
"items": [
{
"when": "${DATA.PACKAGE_NAME}",
"type": "Frame",
"onMount": {
"type": "ImportPackage",
"sequencer": "DelayedLoader_${event.source.uid}",
"name": "${DATA.PACKAGE_NAME}",
"version": "${DATA.PACKAGE_VERSION}",
"onLoad": {
"type": "InsertItem",
"item": "${DATA}"
}
}
},
"${DATA}"
]
}
},
"mainTemplate": {
"items": {
"type": "Container",
"item": {
"type": "PackageWrapper",
"DATA": "${data}"
},
"data": [
{
"PACKAGE_NAME": "FishFeeder",
"PACKAGE_VERSION": "1.2.0",
"type": "FishFeederLayout",
"numberOfFish": 12,
"tankSize": "SMALL"
},
{
"type": "Text",
"text": "This isn't a fish tank"
}
]
}
}
}
In this example the PackageWrapper
layout checks to see if the PACKAGE_NAME
property has been defined. If it has, it treats that as the package name and creates a Frame
with an onMount
event handler that loads the requested package and then inserts the item as a component. If the PACKAGE_NAME
property isn't defined, the wrapper includes the item.
Related topics
Last updated: ...