Advanced Topics

APL Data Sources

• Skill developers may need to use APL Data Sources and use them via APL Data-Binding rather than binding data to a component on runtime utilizing React Props or React Context.

• When there is a need of using APL Data Source, data source object must be provided to dataSources property of APL component.

// FruitApl.jsx
...
class FruitApl extends React.Component {
    render() {
        const fruitData = {
            apple: {
                title: "apple",
                image: "https://m.media-amazon.com/images/G/01/voicehub/vesper_fruit_skill/licensed_images/Apple.jpg"
            }
        };
        return (
            <APL dataSources={fruitData}>
            <MainTemplate parameters={["payload"]}>
              <Frame width="100vw" height="100vh" backgroundColor="rgb(22,147,165)">
                <Container width="100vw" height="100vh" alignItems="center" justifyContent="spaceAround">
                  <Text text="${payload.apple.title}" fontSize="50px" color="rgb(251,184,41)" />
                  <Image source="${payload.apple.image}" height="60vh" width="30vh" scale="best-fit" />
                </Container>
              </Frame>
            </MainTemplate>
          </APL>
        );
    }
}

APL Layout

• The defined React components inside a skill can be reused multiple times to serve different content. They basically serve like APL Layout.

• There can be times when skill developers want to reduce directive payload size and using APL Layout can be a solution for this situation.

// MySkillApl.jsx

import * as React from "react";
import omit from 'lodash/omit';
import { APL, MainTemplate, APLComponent } from "ask-sdk-jsx-for-apl";

//Define layouts json to push into APL.
const layouts = {
  MyLayout: {
    parameters: [
      "parameterText"
    ],
    item: [
      {
        type: "Text",
        text: "${parameterText}",
        width: "100%"
      }
    ]
  }
}

//Create React Components for the defined layouts.
const MyLayout = (props) => {
  return (
    <>
      <APLComponent
        definition={{ ...omit(props, ['children']), type: 'MyLayout' }}>
      </APLComponent>
    </>
  );
}

//Use Defined Layout React Component inside APL.
export class MySkillApl extends React.Component {
  render() {
    return (
      <APL layouts={layouts}>
        <MainTemplate>
          <MyLayout parameterText="Testing Jsx Layouts" />
        </MainTemplate>
      </APL>
    );
  }
}

APL Commands

• Ask-Sdk-Jsx-For-Apl provides contracts for APL Commands. Therefore it leverages command declarations within typescript usage.

• The set of usable commands interfaces can be found under home page.

• The following sample demonstrates the usage of AnimateItem command inside onMount property.

// FruitApl.tsx

import * as React from "react";
import { Frame, Container, Text, Image, APL, MainTemplate, Command } from "ask-sdk-jsx-for-apl";

export class FruitApl extends React.Component<{ fruit: object }> {
  private buildAnimateCommand(): Command {
    const command: Command = {
      type: "AnimateItem",
      duration: 600,
      easing: "ease-in-out",
      value: [
        {
          property: "opacity",
          from: 0,
          to: 1,
        },
        {
          property: "transform",
          from: [
            {
              translateX: 200,
            },
            {
              rotate: 90,
            },
          ],
          to: [
            {
              translateX: "0",
            },
            {
              rotate: 0,
            },
          ],
        },
      ],
    };
    return command;
  }
  public render() {
    return (
      <APL>
        <MainTemplate>
          <Frame width="100vw" height="100vh" backgroundColor="rgb(22,147,165)">
            <Container
              width="100vw"
              height="100vh"
              alignItems="center"
              justifyContent="spaceAround"
            >
              <Text
                text="${this.props.fruit.title}"
                fontSize="50px"
                color="rgb(251,184,41)"
              />
              <Image
                source="${this.props.fruit.image}"
                height="60vh"
                width="30vh"
                scale="best-fit"
                onMount={[this.buildAnimateCommand()]}
              />
            </Container>
          </Frame>
        </MainTemplate>
      </APL>
    );
  }
}

• In case of using Execute Command Directive with Ask-Sdk-Jsx-For-Apl, token property must be provided to APL component: <APL token="token_name">.