Add the solution stories jig and datasource
In this step, you will learn how to create a dedicated area on the for content, such as news, announcements, videos, URLs, or images. The area is added using stories. You will create the story file using the component.story-group and a static datasource to reference two images with a title.
- You will add an image, titles, thumbnails, and descriptions as the data for displaying the story jig.
- See the sample datasource code below for adding the image details for the story jig to display. Save the project.
- For this jig you can delete the header , onFocus, and datasource lines.
- For the container to display the story add an entity component with an entity field as shown in the code below:
6. Now you can add the story that will be displayed in the dedicated area at the top of the . Under the children node type stories:, the auto selection pops up, select stories to open the skeleton YAML . Under data add an expression to reference the data from the story-static.jigx datasource file. Add data: [email protected]. You can add a groupName: that displays on the story. You can add your own or use My work day.
7. Under Item: you need to define the item type, in this solution, add the component: image type as the datasource is an image. Add the title field by adding the following expression to reference the title from the datasource file title: [email protected]. Add a subtitle: [email protected]. Add the source of the image by using an expression source: uri: [email protected]. Lastly, add the following to open a web site when the story is pressed. onPress: type: action.open-url options: title: Read More url: https://docs.jigx.com/stories
8. Your stories node should resemble the code below. Save the project.
9. Your solution-story.jigx file should resemble the code below.
