Components

story-group

7min

Create a group of stories or published content related to a topic or theme. When you tap on the initial image/video, further actions, such as open-url﻿ are shown. The stories are organized in a carousel, making it easy to swipe through. There can be more than one story group, and you can go to the next story group by swiping left on the stories carousel on the 
﻿. A story can either be an image or a video story.  For more information on stories, see Stories﻿. 
﻿Configuration options﻿
﻿
Core Structure
﻿
data
The datasource containing the data to be displayed.
item
In the item property, you can use the following components:
﻿image﻿﻿
﻿video-player﻿﻿
The item displayed in the list for each data item from the data will get an item in @context.current.item. The root item or the first item is rendered where the when condition is true or empty.
Other options 
﻿
actionButtonTitle
Customize the bottom action title. This property can be overwritten by item.onPress.title property. The default title is Show more.
groupName
Overrides 
﻿ title, and is displayed on story group name.
Other options for the image component
﻿
subtitle
The subtitle/ short description of the topic/image
title
The title of the topic/image
uri
The source of the image.
Other options for the video-player component
﻿
ratio
There are 2 options available:
16:9 (default for non-YouTube videos)
4:3
subtitle
The subtitle of th video.
thumbnailUri
The video thumbnail image that will be visible in the story. Example of the expected format is. https://videos.com/images/video\-preview\-image.jpg\﻿
title
The title of the video.
url 
The URL source of the video.
Actions
﻿
onPress
The action is triggered when pressing on the image/video. Use IntelliSense (ctrl+space) to see the list of available actions. 
Considerations
The images can be preloaded and cached using the asset folder's images file. The images will be displayed even when you are offline.  For more details, refer to Assets﻿.
For stories to be displayed on the 
﻿ add the 
﻿ to the index.jigx file under the stories property as shown below and not under the widget property. 
index.jigx
name: Claims
title: Claims App
category: business      
stories:
  - story-group-video-dd
  - story-group-image-dd
name: Claims
title: Claims App
category: business      
stories:
  - story-group-video-dd
  - story-group-image-dd
﻿
You can have multiple stories displayed on the 
﻿, by listing multiple 
﻿s under the stories property. On the 
﻿ the stories will display an indicator (circle) under the stories component. The number of indicators shows how many stories are in the story-group. Swipe left or right to see the stories.
﻿
﻿Examples and code snippets ﻿
Using image in your story group
Image story group
﻿
Image story group
﻿
In this example the story-group displays an image that links to external content.
Examples:
See the full example using static data on GitHub. 
See the full example using dynamic data on GitHub. 
Datasource:
See the full datasource for static data on GitHub.
See the full datasource for dynamic data on GitHub.
story-group-image (static)
story-group-image (dynamic)
datasources (static)
datasources (dynamic)
index.jigx
stories:
  type: component.story-group
  options:
    data: [email protected]-static
    groupName: Work productivity
    item: 
      type: component.image
      options:
        title: [email protected]
        subtitle: [email protected]
        source:
          uri: [email protected]
        onPress: 
          type: action.open-url
          options:
            title: Read More
            url: [email protected]
stories:
  type: component.story-group
  options:
    data: =@ctx.datasources.story-static
    groupName: Work productivity
    item: 
      type: component.image
      options:
        title: =@ctx.current.item.title
        subtitle: =@ctx.current.item.description
        source:
          uri: =@ctx.current.item.image
        onPress: 
          type: action.open-url
          options:
            title: Read More
            url: =@ctx.current.item.url
﻿
Using video in your story group
Video story group
﻿
﻿
﻿
In this example the story-group displays a video that links to external content.
Examples:
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub.
Datasource:
See the full datasource for static data in GitHub. 
See the full datasource for dynamic data in GitHub.
story-group-video (static)
story-group-video (dynamic)
datasources (static)
datasources (dynamic)
index.jigx
stories:
  type: component.story-group
  options:
    data: [email protected]-static
    groupName: Work productivity
    item: 
      type: component.video-player
      options:
        subtitle: [email protected]
        url: [email protected]
        thumbnailUri: [email protected]
        title: [email protected]
        onPress: 
          type: action.open-url
          options:
            title: See Tips Here
            url: [email protected]
stories:
  type: component.story-group
  options:
    data: =@ctx.datasources.story-static
    groupName: Work productivity
    item: 
      type: component.video-player
      options:
        subtitle: =@ctx.current.item.description
        url: =@ctx.current.item.videoUrl
        thumbnailUri: =@ctx.current.item.thumbnail
        title: =@ctx.current.item.title
        onPress: 
          type: action.open-url
          options:
            title: See Tips Here
            url: =@ctx.current.item.url
﻿
﻿

Core Structure
data	The datasource containing the data to be displayed.
item	In the item property, you can use the following components: image video-player The item displayed in the list for each data item from the data will get an item in @context.current.item. The root item or the first item is rendered where the when condition is true or empty.

Other options
actionButtonTitle	Customize the bottom action title. This property can be overwritten by item.onPress.title property. The default title is Show more.
groupName	Overrides title, and is displayed on story group name.

Other options for the image component
subtitle	The subtitle/ short description of the topic/image
title	The title of the topic/image
uri	The source of the image.

Other options for the video-player component
ratio	There are 2 options available: 16:9 (default for non-YouTube videos) 4:3
subtitle	The subtitle of th video.
thumbnailUri	The video thumbnail image that will be visible in the story. Example of the expected format is. https://videos.com/images/video\-preview\-image.jpg\
title	The title of the video.
url	The URL source of the video.