Forum Discussion

darrenSP's avatar
darrenSP
Mentor
8 years ago

Passing a variable from one component to another in the same quilt

Hi,

 

I have a quilt that has for example 2 components.

 

One component has a dropdown which changes the value of a variable. I want to pass this variable from this component into another component in order to change what the user sees.

 

Is this possible through FreeMarker or would I need to use JS? If so is there any examples?

 

Thanks, Darren.

  • darrenSP- This is not possible in freemarker as it is server side language, you can't update the freemareker variable value or pass it to next component on run time.  This is only possible using JS.

     

  • Hi darrenSP

     

    The way I approached that in a similar scenario was working with an endpoint returning the innerHTML and JavaScript to update the component. This should be scalable to work in your scenario with two components.

     

    My scenario was a list of unread messages on a board which included a drop down menu to select a different board. I created two components and one endpoint:

    1. Widget component: This was not included in the quilt, but called from both the frontend component to return the board's message list in its initial content and called from the endpoint subsequently to list the messages of the new board.
    2. Frontend component: This was included in the actual page quilt and included the JavaScript to listen to changes in the dropdown, perform the AJAX call to the endpoint and then completely replace the existing component HTML:
      $('.custom-openresponse-component .lia-panel-content-wrapper').html($(dataToInject).html());
    3. Endpoint: Let me share the full code sample of that so you see how simple it is to pass parameters when calling the endpoint:
      <#assign nodeId = http.request.parameters.name.get("nodeid","") />
      <#assign nodeType = http.request.parameters.name.get("nodetype","") />
      <#if nodeId?has_content && nodeType?has_content >
      	<@component id="custom-openresponse-widget-boardinfo" nodeid=nodeId nodetype=nodeType />
      </#if>

    In your situation if both of your frontend components are always updated at the same time then you create one endpoint which returns the HTML for both components at once to reduce the number of calls and waiting time.

  • darrenSP- This is not possible in freemarker as it is server side language, you can't update the freemareker variable value or pass it to next component on run time.  This is only possible using JS.

     

    • darrenSP's avatar
      darrenSP
      Mentor

      Thanks. I figured it would be in JS.

       

      Is there a form of session storage that can be used? JS solves the problem until you move to another page then the value will be forgotten.

  • ClaudiusH's avatar
    ClaudiusH
    Khoros Alumni (Retired)

    Hi darrenSP

     

    The way I approached that in a similar scenario was working with an endpoint returning the innerHTML and JavaScript to update the component. This should be scalable to work in your scenario with two components.

     

    My scenario was a list of unread messages on a board which included a drop down menu to select a different board. I created two components and one endpoint:

    1. Widget component: This was not included in the quilt, but called from both the frontend component to return the board's message list in its initial content and called from the endpoint subsequently to list the messages of the new board.
    2. Frontend component: This was included in the actual page quilt and included the JavaScript to listen to changes in the dropdown, perform the AJAX call to the endpoint and then completely replace the existing component HTML:
      $('.custom-openresponse-component .lia-panel-content-wrapper').html($(dataToInject).html());
    3. Endpoint: Let me share the full code sample of that so you see how simple it is to pass parameters when calling the endpoint:
      <#assign nodeId = http.request.parameters.name.get("nodeid","") />
      <#assign nodeType = http.request.parameters.name.get("nodetype","") />
      <#if nodeId?has_content && nodeType?has_content >
      	<@component id="custom-openresponse-widget-boardinfo" nodeid=nodeId nodetype=nodeType />
      </#if>

    In your situation if both of your frontend components are always updated at the same time then you create one endpoint which returns the HTML for both components at once to reduce the number of calls and waiting time.

    • darrenSP's avatar
      darrenSP
      Mentor

      Seems like a pretty good solution for on the fly changes! I like it.

       

      I may implement something similar down the line, but for now I have just been using a small form around the dropdown with an apply button which sends a GET request. I take the parameter and modify the SELECT call based on this.

       

      I like how yours will do it on the fly rather than the need for a submit and using an endpoint seems like a better idea.

       

      Thanks for your help.