JavaScript implementation issue
Application Type

Hello everyone!

I'm trying to impement a javascript library which has the same behaviour of instagram stories. The author of this library explain how to do it, but something went wrong when I try to send some objects as input parameter.

The basic of this script is:

var stories = new Zuck(this.document.querySelector('.UserStories'), // .UserStories is a class defined in a container



        avatars: true,         // shows user photo instead of last story item preview

        list: false,           // displays a timeline instead of carousel

        openEffect: true,      // enables effect when opening story

        cubeEffect: false,     // enables the 3d cube effect when sliding story

        autoFullScreen: false, // enables fullscreen on mobile browsers

        backButton: true,      // adds a back button to close the story viewer

        previousTap: true,     // use 1/3 of the screen to navigate to previous item when tap the story

        localStorage: true,    // set true to save "seen" position. Element must have a id to save properly.

        rtl: false,            // enable/disable RTL


        stories: [




Then I call a function to update stories


So my question here is every time that I put new objects hard coded it works fine, but if I put it as input parameter something wen wrong...


Hi Guilherme!

Cool subject... Instagram! ??

I don't know exactly what you did to use an input parameter, but follow attached an example of your module working with dynamic data.

What I did:

  • Structure for stories;
  • Populate a screen variable with data on initializing event;
  • JSON serialize to convert from the list to JSON;
  • Input parameter type text to receive JSON (don't support type JSON);
  • JSON parse inside javascript to convert from text to JSON again.

Hope it helps! ??


Hi David,

You brought me some very important insights! I've tried a similar approach as you did, but some concepts was not completly connected  in my mind and now I can see it clearly.

Thank you!

By the way, I'm a big fan of Hi Interactive approach... Hi Music project was insane, great webinar.

Great! ??

Hope we can share some cool together ideas in the future!


Hi Guilherme,

In Addition to David's suggection please also keep in mind that because you are sending data in input parameter so you must be fetching it from any database entity or external API. 

In this case you should execute that javascript on "On After Fetch" event of your screen aggrigate or fetch data action.

Thank you Nikhil, great extra suggestion!

Thank you, Nikhil! Nice tip, gotcha!

Hello guys, it's me again.

Now it is fetching data from db and create the stories. Nice, but there is this property that is not set only on the first load... if reaload the same screen, everything works fine...

just in case, OML v2 is attached.

url preview:

url to create stories and change data:



Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.