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 need to add the data that the solution story can read from. For this step, you create a Static Datasource in the datasource folder of the project. The data specifies the description, title, and image for the story. Right-click on the datasources node in Explorer and select New file.
- Name the file story-static. The file opens and shows the 's auto-complete popup listing the datasource types. Click on Static datasource to open the skeleton YAML created by the .
- 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.
- Open the Hello- solution in the in , right-click on the s node in Explorer, and select New file.
- Name the file solution-story. The file opens and shows the 's auto-complete popup listing the five types. Click on Default to open the skeleton YAML created by the
- Give the a title called My customer story and provide a description like Customer story.
- 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: =@ctx.datasources.story-static. 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: =@ctx.current.item.title. Add a subtitle: =@ctx.current.item.description. Add the source of the image by using an expression source: uri: =@ctx.current.item.image. 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.