How can I establish a scope variable through client-side JavaScript in XPages?

Question

How can I establish a scope variable through client-side JavaScript in XPages?

My goal is to update an XPages scope variable using Client-side JavaScript. I have a complex XPage with multiple sections that are toggled on and off using Dojo. Within this XPage, there is a button that triggers some Server-side JavaScript. However, after the SSJS runs, the default visible section reappears instead of the section that was visible before clicking the button. I want to maintain the visibility of the section that was active before the button click even after executing the SSJS.

My idea is to utilize a scope variable - employ Client-side JavaScript to determine the current visible section on the XPage, store this in a scope variable, and then retrieve and display this value during the onClientLoad event of the XPage to ensure the correct section is visible (while hiding all others). However, I have not been able to find a way to set a scope variable directly from Client-side JavaScript. I attempted to add

var xyz = "#{javascript:viewScope.put('sectionDisplay','Section')}"

to the onClick event of the button, but this erroneously sets the scope variable even when the button is not clicked.

Prior to XPages, passing variables using query strings between pages was common. How can I accomplish this functionality now?

javascript variables scope xpages xpages-ssjs

Answer 1

Answer №1

Setting the CSJS variable in this manner is not recommended: When you include this code in your CSJS, it will be evaluated prior to being sent to the browser. This results in the variable being set regardless of whether the button is clicked or not.

Instead, you can incorporate some SSJS code within your button to define the viewScope variable. You can transmit the value from the browser using a parameter, as outlined in this resource:

UPDATE:

In SSJS, you can access various parameters using the param object. For example, if you include the parameter value in your CSJS...

XSP.partialRefreshGet(id, {
    params: { 'value': 'some string'}
});

... you can retrieve the parameter in SSJS like this:

param.get("value");

Answer 2

Setting the CSJS variable in this manner is not recommended: When you include this code in your CSJS, it will be evaluated prior to being sent to the browser. This results in the variable being set regardless of whether the button is clicked or not.

Instead, you can incorporate some SSJS code within your button to define the viewScope variable. You can transmit the value from the browser using a parameter, as outlined in this resource:

UPDATE:

In SSJS, you can access various parameters using the param object. For example, if you include the parameter value in your CSJS...

XSP.partialRefreshGet(id, {
    params: { 'value': 'some string'}
});

... you can retrieve the parameter in SSJS like this:

param.get("value");

Answer 3

Answer №2

The best approach depends on the specific scenario you are dealing with. If you prefer to utilize partial or full refresh, you can incorporate a Hidden edit element within XP, linking it to anyScope.variable_name, and updating its value using CSJS:

  var element = document.getElementById("#{id:hiddenInput1}");
  element.value = "updated content";

Upon each refresh, the modified value will be sent to the model and stored in the scoped variable for future reference.

Alternatively, you can implement an event handler using SSJS to manipulate the scoped variable according to the value of the hidden input or the value submitted, as suggested in Sven's response.

Answer 4

The best approach depends on the specific scenario you are dealing with. If you prefer to utilize partial or full refresh, you can incorporate a Hidden edit element within XP, linking it to anyScope.variable_name, and updating its value using CSJS:

  var element = document.getElementById("#{id:hiddenInput1}");
  element.value = "updated content";

Upon each refresh, the modified value will be sent to the model and stored in the scoped variable for future reference.

Alternatively, you can implement an event handler using SSJS to manipulate the scoped variable according to the value of the hidden input or the value submitted, as suggested in Sven's response.

Answer 5

Answer №3

Consider an alternative strategy: instead of relying on the scope variable, you may choose to hide an element by adjusting its style property to "display:none".

Imagine you have a div like this:

<xp:div id="mydiv">...</xp:div>

Here's an example of how you can achieve this using CSJS in a button:

document.getElementById("#{id:mydiv}").style.display="none"

Answer 6

Consider an alternative strategy: instead of relying on the scope variable, you may choose to hide an element by adjusting its style property to "display:none".

Imagine you have a div like this:

<xp:div id="mydiv">...</xp:div>

Here's an example of how you can achieve this using CSJS in a button:

document.getElementById("#{id:mydiv}").style.display="none"

Answer 7

Answer №4

XSP.partialRefreshGet( id, {
    params: { 'value': 'some string'}
});

... you can retrieve the parameter in SSJS using:

param.get("value");

I am transferring a unique identifier from a grid to a dialog box. While I am able to fetch param.get('unid'), I am facing difficulty setting it to the document data source unique identifier. This prevents the fields from being populated with values from the backend document. Since there are numerous fields, I am exploring options to populate the data source without manually entering values in each field. Is there a way to make the document data source recognize the param.unid? I attempted using a hidden input as suggested, but the value is not being submitted. Is this a viable approach?

XSP.partialRefreshGet(dialogId,
{
    params: xspParams,
    onStart: function(){
        //dojo.style(loadingGifId,'display','block');
        XSP.getElementById("#{id:inputText1}").innerHTML = unid; //not functional
        XSP.getElementById("#{id:inputText1}").value = unid; //also not functional
    },
    onComplete: function(){
        dijit.byId(dialogId).show();
        //dojo.style(loadingGifId,'display','none');    
}});


<xp:panel id="dialog">
    <input id="inputText1"
        value="#{javascript:sessionScope.personUNID;}">
    </input>

    <xp:this.data>
        <xp:dominoDocument var="docPerson" action="editDocument"
            formName="fUserName">
            <xp:this.documentId><![CDATA[#{javascript:sessionScope.personUNID ;}]]></xp:this.documentId>
        </xp:dominoDocument>
    </xp:this.data>

    <xp:inputText id="cfParams"
        value="#{javascript:param.get('unid');}">
    </xp:inputText>
</xp:panel>

Answer 8

XSP.partialRefreshGet( id, {
    params: { 'value': 'some string'}
});

... you can retrieve the parameter in SSJS using:

param.get("value");

I am transferring a unique identifier from a grid to a dialog box. While I am able to fetch param.get('unid'), I am facing difficulty setting it to the document data source unique identifier. This prevents the fields from being populated with values from the backend document. Since there are numerous fields, I am exploring options to populate the data source without manually entering values in each field. Is there a way to make the document data source recognize the param.unid? I attempted using a hidden input as suggested, but the value is not being submitted. Is this a viable approach?

XSP.partialRefreshGet(dialogId,
{
    params: xspParams,
    onStart: function(){
        //dojo.style(loadingGifId,'display','block');
        XSP.getElementById("#{id:inputText1}").innerHTML = unid; //not functional
        XSP.getElementById("#{id:inputText1}").value = unid; //also not functional
    },
    onComplete: function(){
        dijit.byId(dialogId).show();
        //dojo.style(loadingGifId,'display','none');    
}});


<xp:panel id="dialog">
    <input id="inputText1"
        value="#{javascript:sessionScope.personUNID;}">
    </input>

    <xp:this.data>
        <xp:dominoDocument var="docPerson" action="editDocument"
            formName="fUserName">
            <xp:this.documentId><![CDATA[#{javascript:sessionScope.personUNID ;}]]></xp:this.documentId>
        </xp:dominoDocument>
    </xp:this.data>

    <xp:inputText id="cfParams"
        value="#{javascript:param.get('unid');}">
    </xp:inputText>
</xp:panel>

How can I establish a scope variable through client-side JavaScript in XPages?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Retrieve data from MongoDB using the find() method results in an empty response, however,

What steps can I take to stop the browser from refreshing a POST route in Express?

Encountering a ng-select2 Error with Angular version 4.1.3

Issue: My application is unable to start due to the module nuxt.js not being found. Can someone help me troubleshoot

Why is there a node_modules folder present in the npm package I authored when using it as a dependency in another module?

Using AngularJS to differentiate between desktop and mobile devices, as well as determine if the connection is wifi or not

Toggle visibility of div based on current business hours, incorporating UTC time

Utilizing a distinct template with ui-router: A step-by-step guide

What is the proper way to retrieve the app object from a module in ExpressJS?

The ChromeDriver capabilities that have been configured are not maintained once the WebDriver is constructed in Node Selenium

Creating a basic Angular 1 application from scratch

What is the best way to create height segments from a cylinder in three.js?

Is it possible for JavaScript to interact with elements that are created dynamically?

Transmit intricate data structure to a web API endpoint using AJAX requests

Having trouble installing gatsby-plugin-transition-link using npm

Can you explain the distinction between using single and double quotes in my JavaScript and CSS code?

What could be the reason my black overlay doesn't show up when the button is clicked?

What are the steps to implement THREE.MeshLine in my JavaScript project?

What could be causing the JavaScript to malfunction when combined with PHP?

What is Angular's approach to handling elements that have more than one directive?