Xpages-Setting Up the ViewScope from client-side javaScript (oncontextmenu)

Question

I have a Xpages in which I have repeat control, Now I have the list of documents from a view. Onclick on the row is setting the viewScope Array with the Unid.

I have done this actually for the purpose of selecting the document and to keep track that which document is selected, I am successfull in doing that but the main purpose was, I wanted to obtain the UNID on right-Click context menu.

Now, Also the right click event is providing me the UNID in one text field. I have obtained this by using "oncontextmenu" attribute in a div tag.

<div oncontextmenu="javascript:
var a = document.getElementById('#{id:inputText1}').value;
document.getElementById('#{id:inputText2}').value=a;
return false;">

There is "inputText1" in each row with the default value UNID of the perticular row.

In above code I am getting the UNID from "inputText1" and setting it up to the "inputText2", So on right click I am successfully getting the UNID of the clicked row.

In futher case I have an idea that I can do any operation by using that UNID but instead of setting the UNID to the "inputText2", I want to set this UNID to viewScope not in "inputText2".

Basically my overall issue is that I want to set UNID which I am getting on right-click(oncontextmenu) to viewScope not in any text field("inputText2") using above client-side java script.

example code:

 <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">

    <xp:this.afterPageLoad><![CDATA[#{javascript:var myList = new java.util.ArrayList();
sessionScope.put("myList",myList);}]]></xp:this.afterPageLoad>


    <xp:button value="Refresh" id="button3">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="repeat2">
        </xp:eventHandler></xp:button>
        <xp:repeat id="repeat2" rows="30" value="#{sessionScope.myList}"
            var="listData">
            <xp:text escape="true" id="computedField1">

                <xp:this.value><![CDATA[#{javascript:listData+" , "}]]></xp:this.value>
            </xp:text>
        </xp:repeat>
        <xp:inputText id="inputText2"></xp:inputText>
        <xp:repeat id="repeat1" rows="30" var="rowData"
        indexVar="repeatIndex" first="0" styleClass="abc">
        <xp:this.value><![CDATA[#{javascript:var viewName = "Adressakten";
var v:NotesView = database.getView(viewName);
return v.getAllEntries();}]]></xp:this.value>
        <xp:br></xp:br>

<div oncontextmenu="javascript:
var a = document.getElementById('#{id:inputText1}').value;
document.getElementById('#{id:inputText2}').value=a;
return false;">
    <xp:inputHidden id="inputText1">
        <xp:this.defaultValue><![CDATA[#{javascript:var doc:NotesDocument = rowData.getDocument();
return doc.getUniversalID();}]]></xp:this.defaultValue>
    </xp:inputHidden>
    <xp:div id="div1">
            <xp:this.style><![CDATA[#{javascript:javascript:var keyCode =  rowData.getDocument().getUniversalID();

var myArray = sessionScope.get("myList");

if(myArray.contains(keyCode))
return "border-color:rgb(192,192,192);border-style:solid;border-width:thin;height:42.0px;background-color:green;cursor:pointer;"
else
return "border-color:rgb(192,192,192);border-style:solid;border-width:thin;height:42.0px;background-color:rgb(255,255,128);cursor:pointer;"}]]></xp:this.style>
            <xp:text escape="true" id="computedField2">

                <xp:this.value><![CDATA[#{javascript:var doc:NotesDocument = rowData.getDocument();
return doc.getItemValueString('aTitel');}]]></xp:this.value>
            </xp:text>

            <br />
            document Id:
            <xp:text escape="true" id="computedField3">

                <xp:this.value><![CDATA[#{javascript:var doc:NotesDocument = rowData.getDocument();
return doc.getUniversalID();}]]></xp:this.value>
            </xp:text>
            <xp:br></xp:br>
            <xp:button value="Add" id="button1" rendered="false">
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="partial" refreshId="computedField2">
                    <xp:this.action><![CDATA[#{javascript:var keyCode =  rowData.getDocument().getUniversalID();

var myArray = sessionScope.get("myList");

if(!myArray.contains(keyCode)){
myArray.add(keyCode);
}}]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
            <xp:button value="Remove" id="button2" rendered="false">
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:var keyCode =  rowData.getDocument().getUniversalID();

var myArray = sessionScope.get("myList");

myArray.remove(keyCode)}]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:var keyCode =  rowData.getDocument().getUniversalID();

var myArray = sessionScope.get("myList");

if(!myArray.contains(keyCode)){
myArray.add(keyCode);
}
else{
myArray.remove(keyCode);
}}]]></xp:this.action>
            </xp:eventHandler>
        </xp:div></div>
        <br />
    </xp:repeat>
  </xp:view>

I once dabbled around with CSJS and setting scope variables. Maybe that helps: github.com/zeromancer1972/CSJSScopes — Oliver Busse
Unless you specifically want to display the UNID, I would suggest using the Hidden Input control. I believe it automatically adds display:none — Paul Stephen Withers

Paul Stephen Withers Paul Stephen Withers · Accepted Answer · 2015-11-25T08:59:59

It sounds like the JSON RPC Service from the Extension Library is what you need. That will allow you to run SSJS using a value passed from CSJS. It's covered on pages 351-3 of XPages Extension Library book and there may be examples in Extension Library Demo database.

Xpages-Setting Up the ViewScope from client-side javaScript (oncontextmenu)

2 Answers