How can I get the value of SearchBar in Application Layout?
If I have more than one criteria to search (in application layout) how to get the current (selected) value of combobox near the SearchBar?
Have a look on the picture above.
The basic assumption behind the search bar with options is that you'll submit the search information to another XPage. For instance;
<xe:this.searchBar>
<xe:appSearchBar
pageName="/search1.xsp">
<xe:this.options>
<xe:basicLeafNode
label="People"
submitValue="people">
</xe:basicLeafNode>
<xe:basicLeafNode
label="Buildings"
submitValue="buildings">
</xe:basicLeafNode>
</xe:this.options>
</xe:appSearchBar>
</xe:this.searchBar>
Such a markup will create a combobox with two options. When the user submits the search string, it will navigate to /search1.xsp?search=SomeValue&option=buildings. Therefore, you will process those values inside the target page.
In such a case I guess you'll want to decide which view to be searched according to the search option. What I do is generally having a single XPage for search results and different custom controls for different views. You might use a switch or dynamic control component depending on the case. Alternatively, you can use the dynamic view panel component to switch between different views.
If you prefer different search pages for different search options (i.e. searchPeople.xsp and searchBuildings.xsp), you'll have two options. You can design an intermediate page to redirect the user to the desired page or you can create your own search box there. So you don't generally need to have the option value within the page.
BTW, that value is available at the Client-side JavaScript. That's a <select> element and its id is "the id of the application layout control" + "_searchopt". You can refer to the client-side object with dojo.byId("#{id:applicationLayout1}_searchopt").
Hope this helps.
Related
Need a tip for design. Now we have a one search field, with 2 actions - where you can search for a role or a user
If you search for a user you can copy his (role) assignments OR
If you search for a role you can add the selected role.
Generally, UI looks now like this:
Copy user's assignments
Add role
How can this UI be simplified for the user?
I think you should add a menu to the Appbar, similar to the Menus section of the Material Design standard for Layout Structure:
The images above are pulled from the standard, but could be used in your case.
Ditch the radio buttons and present the current search context with its default placeholder text in the search field. Offer a button in the Appbar that presents a modal Menu.
When the menu is presented, offer the available search contexts to the user, allowing them to switch. Upon selection, re-render the search field with new placeholder text. It should probably clear anything that was previously entered.
If for some reason the set of contexts is limited to one (permissions, security, or another reason), present that option in the placeholder text and hide the menu button.
I am using the Application Layout for an application we are creating. We would like to controls the tabs that appear on the title bar. The tabs are defined in a document, with a french title, english title and NotesID of what will be the default document shown for that tab.
With so many controls available, what would be the best way to achieve that? What kind of control can I use to add to the TitleBar that would end up doing the functionality I am looking for?
One additional thing: I need to add a few drop downs, ideally in the titlebar as well, that will set some values used to control what is displayed in the tabs contents and to control what the search will actually search for (language, province, department). What would be the best approach adding thse drop downs to the titlebar?
And by the way, where do you guys get all that information? I have TLCC's courses, IBM's XPages books (that I have not read from cover to cover, I admit) and I still find it very hard to things more advanced than displaying a view and do come CRUD with documents. There are so many containers that can contain a wide variety of objects... Pretty confusing right now what needs to be in what in order to make this all work together.
Thanks a lot,
Ben
Use xe:repeatTreeNode to create several tabs programmatically in title bar:
create an array of objects with label and unid (UniversalID) from your document in value
define a variable tab for repeat
define a xe:basicLeafNode as children with a label tab.label and a href link with tab.unid
<xe:this.titleBarTabs>
<xe:repeatTreeNode
indexVar="aaa"
value="#{javascript:
[ {label:'aaa',unid:'...id..aaa...'},
{label:'bbb',unid:'...id..bbb...'},
{label:'ccc',unid:'...id..ccc...'}
]}"
var="tab">
<xe:this.children>
<xe:basicLeafNode label="#{tab.label}">
<xe:this.href><![CDATA[#{javascript:
"yourXpages.xsp?action=openDocument&documentId=" + tab.unid;
}]]></xe:this.href>
</xe:basicLeafNode>
</xe:this.children>
</xe:repeatTreeNode>
</xe:this.titleBarTabs>
This will show the labels in title bar and open the assigned document clicking on them.
I have an Xpages application that pulls data from another .nsf file. I have a view panel linked to a view in that db. The view has documents with several different forms in it. I want to be able to open each document in it's own form(xpage).
How do I write a computed At Runtime, open selected document using: statement that will select the correct Xpage to present the document.
If you use the Data View component instead of a View Panel, you can compute the pageName attribute, referencing the var attribute to return a different value for each row based on the document that row represents. The flexibility of the Data View component also makes it easier to make your app look more like a modern web application and less like an Excel spreadsheet. As an additional bonus, the mobile theme invokes a renderer that makes each Data View instance look like a native mobile list, so using Data Views instead of View Panels simplifies mobile development.
You have 2 options:
use "use xpage associated with form" and edit the form's property
use a SSJS formula to compute the Form. You provide a variable name in the view control var to access a view row as XSPViewEntry. If the Form is in a view column even one you don't display you use .getColumnValue otherwise getDocument.getItemValueString
Does that work for you?
Maybe this mothed can help you: Unable to get document page name for
Hope this helps
Mark
I had a similar problem today. I use only one form but 3 different xpages for associated with this form. I have 3 different document types in the view. I used rowData the get the type of the document.
try{
var v=rowData.getColumnValue("form");
if(v.indexOf("x")> -1){var page ="x.xsp"}
else if(v.indexOf("y") > -1){var page = "y.xsp"}
else{var page = "z.xsp"}
}catch(e){
var page = "x.xsp"
}
So to your view you can create a column with the value of the form and you can use it.
I have used the extension library Dynamic View control which has an event you can code to get a handle to the NotesViewEntry which was selected. See the demo database page Domino_DynamicView.xsp and the Custom Event Handler tab for an example.
Note, in 8.5.3 (I have not upgraded yet) if you add or edit the eventHandler for onColumnClick it will be added to the XPages source as an xe:eventHandler. It needs to be an xp:eventHandler to work. The way to do it is to copy the code in the source from the exiting event and delete it. Recreate the event and update the code. Then go back into the source and change the tags within the eventHandler to xp:.
Think "computed subform", but in Xpages.
On one of my custom controls, depending on a certain value, I want to either present a custom control that renders a drop-down list using a combobox or renders an input box with a type-ahead.
This is on a custom control that renders a view, with all view configuration choices handled by a document rather than design, so several different views utilize the same custom control.
For example: I have a By Status view using the custom control that has status as the first column and we use a combobox to allow the user to select which Status value to filter by. Another view is sorted by Requisition number and I want to use a type-ahead instead of the combobox.
My preference is to use the same dynamic view custom control for both and have a formula that determines which of the two (comboBox or inputText) to use. How do I compute which custom control to load?
(Credit for the dynamic view control goes to Scott Good's folks over at Teamworks Solutions.)
During it's life cycle, an XPage exists in two places. First of all a representation of the XPage's relevant components is stored on the server. Then the page goes through a lifecycle, retrieving properties from documents, checking which components should be rendered, retrieving the data for any repeating control such as a View Panel etc., and passing the relevant HTML to the browser. The browser is the second place it exists.
So you can't compute a custom control as such. All you can do is set the loaded property, and loaded needs to be based on a non-dynamic calculation such as a viewScope variable, the current XPage name, a view name stored on the XPage etc. What you would have difficulty doing would be using a different custom control based on data on that row entry.
The other option is the Dynamic Content control or Switch control from the Extension Library. Both are similar to using the loaded property, in that you're putting both custom controls on the page and choosing which to display.
From what you're describing, the loaded property should cover what you need.
Some time back I saw this question on StackOverflow where the author had used Include Page control (xp:include) to include custom controls using pageName attribute based on formula.
<xp:include>
<xp:this.pageName><![CDATA[${javascript:sessionScope.ccPageName + ".xsp";}]]> </xp:this.pageName>
</xp:include>
Similar to the technique described by Paul Withers in his answer the attribute of pageName is also computed on page load.
I've spent days trying to figure this out and I give up.
I am a LotusScript programmer and have been trying to learn XPages. All of the examples and sample programs I've studied only touch on pieces of this.
Can someone explain to me step by step how to use the Selected property of the Extension Library Navigator control?
I have created my own custom control based on the layout control from the Extension Library and created a custom property called navigationPath. I also created a navigator custom control that has 5 Page Link Nodes. In the "Selected" property of each Page Link Node, I put the following SSJS:
if(compositeData.navigationPath == "/Home/ApplicationPool"){
return true
}else{
return false
}
/Home/ApplicationPool corresponds to the value I put in the "Selection" property of the particular Page Link Node.
In each layout custom control, I set the "navigationPath" property to compositeData.navigationPath.
What did I miss?
there is a selected and selection property and they mean very different things and can't be used at the same time. In the code example in your question above you are using the selected property which is the wrong one in this case.
Your treeNodes in the navigator should be setup to use the selection property, this is a RegEx value that is used to see if it matches the value passed into the application layout via the custom property.
<xe:navigator id="navigator1" expandable="true" expandEffect="wipe">
<xe:this.treeNodes>
<xe:pageTreeNode label="nodeName" page="/page.xsp" selection="/Home/ApplicationPool" />
</xe:this.treeNodes>
</xe:navigator>
As you can see you don't need to use any SSJS to evaluate a true/false outcome. Just match the value in the treeNode to the one in the XPage's applicationLayout control.
If your using tabs in the layout titleBar then you can set a selection property there also that uses the format /Home/.* which will make that tab highlighted for every XPage that have /Home/ at the start of it's navigationpath custom property. Don;t forget it is RegEx so any valid RegEx statement can be used here adding more power to this particular property.
For the tree nodes in the navigator control you define the name of the xpage to open and then the related selection. Example:
<xe:pageTreeNode page="/text.xsp" selection="/Home/Test" label="Test page">
</xe:pageTreeNode>
For the individual xpages using the applicationLayout you define a value for navigationPath. If this value matches an entry in one of the tree nodes the naviagor control, then the corresponding menu item will be highlighted in the browser. The best way to define the value of the navigationPath is by using a custom property (as you are using). Here's an example of that:
<xe:applicationLayout id="applicationLayout1">
<xe:this.configuration>
<xe:oneuiApplication navigationPath="${javascript:compositeData.navigationPath}" ...
You can see examples of using all this in the Extension Library Teamroom and Discussion templates.
Based on my explanation on how to use it, I can see that you are not using the selection property on the navigation control correct. You just need to define a unique value for each tree node (which then will be used if it matches navigationPath on the individual xpages).
So for your specific example change your selection property to just return: "/Home/ApplicationPool"