Custom Component data flow

App Building
1

Hello all.

I was trying to create a Custom Component where the end user will be able to create a workflow of a process (due to Gojs library). I was able to create needed elements for creation of a Diagram but it looks like I have totally gotten confused with data flow and can not display results of previously created Diagrams after page reloading.

The process I wish to create should be the following: user opens app part with custom component and can see their previously created diagram. the user can interact with the uploaded diagram and change some elements if needed. The process can be repeated.

Here is what i have in Iframe code (concerning saving and loading)

      var $ = go.GraphObject.make;
      var StrategyPlanner;
       var myPalette;

        function loadDiagram() {
         window.Retool.triggerQuery("toLoadDiagram", function(queryData) {
         if (queryData && queryData.json_data) {
         const diagramData = JSON.parse(queryData.json_data.replace(/\\/g, ''));
         updateDiagramFromData(diagramData);
         } else {
         console.error("No data returned from the toLoadDiagram query.");   }
         });
        }

         function saveDiagram() {
        var diagramJson = StrategyPlanner.model.toJson();
        console.log("Saving diagram:", diagramJson);
        if (!diagramJson) {
        console.error("No diagram data to save.");
        return;
         }
         var diagramJson = StrategyPlanner.model.toJson();
          console.log("JSON string before modelUpdate:", diagramJson);
          window.Retool.modelUpdate({ diagram: JSON.stringify(diagramJson) });


        window.parent.postMessage({
        type: 'retool-trigger-query',
        queryName: 'saveDiagramQuery',
       params: { diagram: diagramJson }
       }, '*');
       }
                        
      function init() { //main part where user can build Diagram 
      StrategyPlanner = $(go.Diagram, "customComponent1", {
      "allowDrop": true,
       "undoManager.isEnabled": true // enabling undo & redo});
       StrategyPlanner.addModelChangedListener(function(e) {
       if (e.isTransactionFinished) {
      saveDiagram(); }
      });
      loadDiagram();
      }
          function initp(){ // side part where users get elements from Diagram 
}

 init();
 initp();

Here is SQL request for sending data about the created Diagram from model.

And here is how i call it back from BQ

I have also checked with official documentation about custom components and its development and with some related posts here. They have helped me immensely with getting the Model part updated. But now when I need to load the previous Diagram first is where I get stuck.

Maybe someone from the community can help me and send me in the right direction.
Thank you in advance

2

Hi @Mariya_Bahmat

It's difficult to debug your code since it's badly formatted.

One thing sure is that you're not using the Retool.subscribe handler that is key to get the model from Retool to your component. And you're using window.parent.postMessage that is another sign of something wrong, you don't need to use postMessage at all.

The flow should be:

  • On Component init you get the default Model (you might already have or not the diagram) using the subscriber function.
  • When the Model changes, for example because a Query has been triggered, your Component gets the new Model thanks to the subscribe function, thus the diagram payload.
  • You can trigger a Query from the Component with triggerQuery if you need.
  • The whole point is that the Component get updated automatically because the Model changed and subscribe get called.

Hope this help

1 Like
3

Thank you for the comment. My mistake, have not noticed the format.
If I have understod correctly your recomendation, all data between IFrame code, Model and queries should be done by window.Retool.subscribe and window.Retool.triggerQuery only? No additional event listeners or functions for comunication between frames?

Thanks again.

4

That's right.

1 Like
5

Thank you. I will try to change all of it now.