Components
story-group

7min
This component can create a group of stories or published content related to a topic/theme. The user is met with an image and title that describes the topic. The story with further actions is presented when they tap on the image.
These stories are organized in a carousel, making it easy for the users to swipe through. There can be more than one story group, and users can go to the next story group by swiping left on the stories carousel on the Home Hub.
A story can either be an image or a video story.  For more information on stories, see Stories﻿ 
For your stories to be displayed on Home Hub you have to add the Jig to your index.jigx file
The images can be preloaded and cached by using the assets property in your index.jigx file. The images will be displayed even when you are offline.  For more details please refer to the Index settings﻿﻿
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
The core structure includes: data and item
The item property has 2 options:
﻿Image component
﻿Video-player component
Other options:
Image item
uri - The source of the image 
title and subtitle - The title or subtitle/ short description of the topic/image
﻿
Video item
url - The source of the video
thumbnailUri - The source of the image visible in stories
title and subtitle - The title or subtitle/ short description of the topic/video
ratio - There are 2 options:
16:9
3:4
Actions: 
onPress  - The possibility to add any of the actions (please refer to the list of our Actions). This action(s) will be triggered as a reaction to the press event
﻿Examples and code snippets ﻿
Using image in your story group
﻿
﻿
Story-group displaying 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: =@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
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
﻿
﻿
﻿
Story-group displaying 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: =@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
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
﻿
﻿