JavaScript implementation issue
Application Type
Reactive

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


        stories.update($itemobjects);




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...




JavaScriptIssueExemplo.oml

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! ??


JavaScriptIssueExemploworking.oml

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!

mvp_badge
MVP

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: https://personal-xmupmst4.outsystemscloud.com/JavaScriptIssueExemplo/

url to create stories and change data: https://personal-xmupmst4.outsystemscloud.com/StoriesContent/Stories

 


JavaScriptIssueExemploV2.oml

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