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.

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