Sign In Register

How can we help you today?

Start a new topic
Answered

Dynamic form snippet refresh

Hi,

I'm currently building a dynamic form.

I have a master snippet in a popup with several snippets inside.

I would like to add a "Refresh" button to the master snippet, in order to refresh all included snippets.

Tried different things, but nothing works.

Thanks for your help,


Best Answer

Hi Eric!


I've just made a successful refresh button. I'll walk you through it as best I can:


- I've made a simple snippet to test this, all it does it loads a player and returns a string in their scriptData which I keep changing in the test harness to test if the refresh works. The snippet's javaScript (1st quadrant) is as follows:


_____________________________________________________________________

Spark.setScriptData("form",SnippetProcessor(Spark.getData()));


function SnippetProcessor(data){

    

    var form = {};

    

    return view(data);

    

    function view(data){

        

        //Return the 'test' string

        form.info = Spark.loadPlayer("56edfa8f6b6e2604a17c9a42").getScriptData("test");

        

        return form;

    }

}

_____________________________________________________________________


The 3rd quadrant's construction is as follows:

_____________________________________________________________________

<gs-row>

    <gs-col width="12">

        <gs-title-block title="Edit Player" margin="0" padding="10">

            <gs-form snippet="testSnippet" target="test_56edfa8f6b6e2604a17c9a42">

                

                

                <gs-col width="2">

                   {{form.info}}

                </gs-col>

                

                <gs-col width="2">

                    <gs-submit>Refresh</gs-submit>

                </gs-col>

                    

            </gs-form>

            

        </gs-title-block>

    </gs-col>

</gs-row>

_____________________________________________________________________


Now the magic is in the <gs-form snippet="testSnippet" target="test_56edfa8f6b6e2604a17c9a42"> block. The snippet is going to be the form you want to update, the one that includes this block. In my instance it's my testSnippet. The second variable is the target which is a placeholder in the master snippet, think of it like the currency placeholder in the player master snippet, in my instance I've named the placeholder test_ followed by a player ID for example sake.


-Finally, once the submit button is clicked (Make sure the submit button is present within the gs-form block before </gs-form>) then the snippet will refresh itself in the master snippet.


In my master snippet's 3rd quadrant, I have this placeholder which initially builds a testSnippet then is used in the target reference:


_____________________________________________________________________

<gs-placeholder id= "test_56edfa8f6b6e2604a17c9a42"> 

            <gs-snippet snippet="testSnippet"></gs-snippet>

        </gs-placeholder>

_____________________________________________________________________


I hope this helps, if not, please let me know and I will help you out some more.


Thanks! 
Omar


Answer

Hi Eric!


I've just made a successful refresh button. I'll walk you through it as best I can:


- I've made a simple snippet to test this, all it does it loads a player and returns a string in their scriptData which I keep changing in the test harness to test if the refresh works. The snippet's javaScript (1st quadrant) is as follows:


_____________________________________________________________________

Spark.setScriptData("form",SnippetProcessor(Spark.getData()));


function SnippetProcessor(data){

    

    var form = {};

    

    return view(data);

    

    function view(data){

        

        //Return the 'test' string

        form.info = Spark.loadPlayer("56edfa8f6b6e2604a17c9a42").getScriptData("test");

        

        return form;

    }

}

_____________________________________________________________________


The 3rd quadrant's construction is as follows:

_____________________________________________________________________

<gs-row>

    <gs-col width="12">

        <gs-title-block title="Edit Player" margin="0" padding="10">

            <gs-form snippet="testSnippet" target="test_56edfa8f6b6e2604a17c9a42">

                

                

                <gs-col width="2">

                   {{form.info}}

                </gs-col>

                

                <gs-col width="2">

                    <gs-submit>Refresh</gs-submit>

                </gs-col>

                    

            </gs-form>

            

        </gs-title-block>

    </gs-col>

</gs-row>

_____________________________________________________________________


Now the magic is in the <gs-form snippet="testSnippet" target="test_56edfa8f6b6e2604a17c9a42"> block. The snippet is going to be the form you want to update, the one that includes this block. In my instance it's my testSnippet. The second variable is the target which is a placeholder in the master snippet, think of it like the currency placeholder in the player master snippet, in my instance I've named the placeholder test_ followed by a player ID for example sake.


-Finally, once the submit button is clicked (Make sure the submit button is present within the gs-form block before </gs-form>) then the snippet will refresh itself in the master snippet.


In my master snippet's 3rd quadrant, I have this placeholder which initially builds a testSnippet then is used in the target reference:


_____________________________________________________________________

<gs-placeholder id= "test_56edfa8f6b6e2604a17c9a42"> 

            <gs-snippet snippet="testSnippet"></gs-snippet>

        </gs-placeholder>

_____________________________________________________________________


I hope this helps, if not, please let me know and I will help you out some more.


Thanks! 
Omar

Hi Omar,


Thanks for your answer.

Your example works perfectly.


But if your snippet take the playerId as a parameter from the master snippet, it does not work anymore, because I don't know what to replace XXXXX  

<gs-form snippet="testSnippet?playerId=XXXXX" target="test_56edfa8f6b6e2604a17c9a42">


(same if I hardcode the playerId).



Anyway that's not exactly what I'm trying to achieve.

I would like the refresh button to be in the master snippet, and clicking it would refresh all included snippets.


Not very easy to master these things...



Hi Omar,


Thanks for your example, which works perfectly.

But I can't make it work if the playerId is not hardcoded, but passed from the master snippet. In that case, the refresh does not work.


Anyway my problem is slightly different, I need the refresh button on the master snippet, and when clicked, all included snippets are refreshed.

Thanks again,

Eric



Login to post a comment