xpages search modulo inside a popup

Question

With your help, I did create an Xpage with FTsearch & export into Excel features. The problem is the search being made based on multiple input fields ( let say > 10 ) the xpage is heavy texted + considering the fact there is also a view panel where I list the search results once the Search button is clicked.

This is the main reason I've tried to create ( after the link to Search&Export is clicked ) some pop-up dialog ( which contains an xpage, I guess ) and this pop-up dialog to contain all my input fields + the 2 buttons already created: search & export. So, after I press the Search button from my pop-up => the pop-up dialog is closed and the search results are displayed in the view panel, same thing for the Excel button: pop-up is closed and I open the excel file.

Currently, when I click the link to Search&Export I 'see' all the input panel for the search ( all the input fields + the two buttons ) and of course the view panel. It does work but I think a pop-up dialog will be more user-friendly and it will give more space for the xpage.

What I want to do: move all the inputs fields + the search and export to excel buttons into a dialog, which should appear when the link is clicked.

How to create a dialog which opens when a link is clicked and contains this panel below ( where all the input fields and button for the FTsearch are contained there )

My code for the panel which contains the input fields and the search & export button:

<xp:panel style="background-color:rgb(242,242,242);border-color:rgb(168,168,168);border-width:thin;border-style:solid">
    <xp:table><xp:tr><xp:td><xp:label value="Din" id="label3" style="font-size:8pt;font-family:Verdana;color:rgb(128,0,0)">
                </xp:label></xp:td>
            <xp:td><xp:inputText id="inputText1" value="#{sessionScope.searchDate1}">
                    // some extra code
                </xp:label></xp:td>
            <xp:td></xp:td>
            <xp:td>
                <xp:inputText id="inputText2" value="#{sessionScope.searchDate2}">
                // some extra code
                </xp:inputText></xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Author" id="label1"
                    style="font-size:8pt;font-family:Verdana;color:rgb(128,0,0)">
                </xp:label>
                </xp:td>
            <xp:td>
                <xp:inputText id="searchAutor"
                    value="#{sessionScope.searchAutor}">
                </xp:inputText>
            </xp:td>
            <xp:td></xp:td>
            <xp:td></xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td style="font-family:Verdana;font-size:8pt">
                <xp:label id="label2" value="Titlu carte"
                    style="color:rgb(128,0,0);font-size:8pt;font-family:Verdana">
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText id="searchTitlu"
                    value="#{sessionScope.searchTitlu}">
                </xp:inputText>
            </xp:td>
            <xp:td></xp:td>
            <xp:td></xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:button value="Search" id="button6"
                    styleClass="lotusFormButton">
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="complete" immediate="false" save="true"
                        id="eventHandler1">
                    </xp:eventHandler>
                </xp:button>
            </xp:td>
            <xp:td>
                <xp:text escape="true" id="computedField1"
                    rendered="false">
                    <xp:this.value><![CDATA[#{javascript:return "Query = " + sessionScope.queryString}]]></xp:this.value>
                </xp:text>
            </xp:td>
            <xp:td></xp:td>
            <xp:td>
                <xp:button value="Export" id="button1"
                    styleClass="lotusFormButton" style="float:right;">
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="complete" immediate="false" save="true"
                        id="eventHandler2">
                        <xp:this.action>
                            <xp:openPage
                                name="/export_hidden.xsp">
                            </xp:openPage>
                        </xp:this.action>
                    </xp:eventHandler>
                </xp:button></xp:td>
        </xp:tr>
    </xp:table></xp:panel>

I appreciate your time.

@PerHenrikLausten How to create a dialog containing all my inputs and display it when the link is clicked — Florin M.
Put your dialog in a custom control, and create custom properties and pass them to the control. — Steve Zavocki
Could you give me an example? I did already update my question with the code already created for the custom control which contains the input fields and the buttons for the FT search — Florin M.

Per Henrik Lausten Per Henrik Lausten · Accepted Answer · 2014-06-01T20:17:10

Here's an example of a dialog where you can add your fields to:

<xe:dialog id="exampleDialog" title="Example dialog">
    <xp:div styleClass="lotusDialogContent">
        <!-- Add your table here -->
    </xp:div>
    <div class="lotusDialogFooter">
        <!-- 
          add your buttons here
        -->

        <!-- example cancel link -->
        <xp:link id="link1" text="Cancel" styleClass="lotusAction">
            <xp:eventHandler event="onclick" submit="false">
                <xp:this.script><![CDATA[XSP.closeDialog('#{id:exampleDialog}')]]></xp:this.script>
            </xp:eventHandler>
        </xp:link>
    </div>
</xe:dialog>

You open the dialog using server-side JS like this:

getComponent("exampleDialog").show();

Or like this using client-side JS:

XSP.openDialog("#{id:exampleDialog}")

You can also style the content and button bar area entirely using extension library. Your dialog would then look like this:

<xe:dialog id="exampleDialog">
    <xe:dialogContent id="dialogContent1">
        <!-- content here -->
    </xe:dialogContent>
    <xe:dialogButtonBar id="dialogButtonBar1">
        <!-- buttons here -->
    </xe:dialogButtonBar>
</xe:dialog>

Here's an example of a button that you can use inside the dialog to close the dialog and refresh the viewpanel on the same XPage (assuming the viewpanel is called "viewpanel1"):

<xp:button value="Search" id="searchButton">
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="false" refreshId="viewpanel1">
        <xp:this.action><![CDATA[#{javascript:
            getComponent('exampleDialog').hide()
        }]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

You can use XSP.addOnLoad() to open the dialog once the page is loaded. Add this to your XPage:

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
        XSP.addOnLoad(function(){
            XSP.openDialog("#{id:exampleDialog}")
        });
    ]]></xp:this.value>
</xp:scriptBlock>

xpages search modulo inside a popup

1 Answers