xpages search modulo inside a popup - xpages

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.

Answer 1

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>