Advanced Topics

APL Data Sources

• Although providing data sources to components using React Props or React Context are the encouraged way to bind data to a component on runtime, there can be cases where skill developers need to use APL Data Sources and use them via APL Data-Binding.

• 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>
    );
  }
}