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.
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.
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.
I have database where all documents were created by Lotus Notes client. Documents contain Rich text field with tabbed tables with text and attachments on every tab.
Now I want to show documents with XPages. But tabbed tables are not visible in XPages.
How can I display Rich text field with tabbed table in XPages?
The answer isn't as straight forwarded as you would like and involved some wizardry. There are several moving parts. The first is the quality of the RTF-HTML conversion. I superstrongly suggest you give Ben a call. In case he doesn't handle tabbed tables (which are a beast), these are the steps to get a solution (I hope the force Javascript is strong with you):
Familiarize yourself with the Table handling and rendering. To do so, open the RichText field on its own in the browser. The trick is the ?OpenField command as documented by Carl.
In that HTML you can click on the various tabs to show that content, look at the URL and the source to learn about the exact syntax (which AFAIK isn't documented - or the documentation is well hidden)
By now you should have an idea how to identify a tabbed table by its HTML markup. Try to construct a Dojo selector or a JQuery (whatever is your poison).
Now show your page without the RichText field, but place a placeholder <div id="RTPlaceholder" /> where you want to show your content (or place a dijit panel there).
Use an Ajax call to ?OpenField to get the content. With your query expression you check for tabbed tables - if none there, just render the content
If you found a tabbed table, you construct a dijit tabbed table (or a UI framework of your choice equivalent) and make one call per tab to fill them. Some clever queries are needed (you don't want the surrounding table, but only tab-label and content).
That's the general direction. So Step 1: a little chat with Ben. As usual the devil is in the details, so you need to be brave.
Memento bene:
RichText > HTML => false;
HTML > RichText => false;
HMTL != RichText => true;
Let us know how it goes!
Okay... this is a little difficult to explain but I will try my best.
In Custom Control while adding properties in Property Definition we can set "Allow multiple instances" which allows us to add multiple instances of that property when the control is embedded in XPage.
Similarly, I need to know whether it is possible to add (and remove) Editable Areas in a custom control when it is embedded in XPage? What I plan is that I would have a repeat control inside my custom control and I would be able to put the contents in each editable area in every loop of that repeat.
Is this the right way to go about or am I looking at this problem incorrectly? Any solution not involving editable areas is also welcome :)
Update 4 Apr 2013:
A use case context I am looking for is a simple carousel where contents of each screen in carousel can have different contents. These contents would be put into each (dynamically added) editable area. The contents can be very different from each other with one screen containing only text, other only image and another both image and text.
Look at the table walker example in the 26 original exercises. It does mostly what you are looking for (conceptually). You won't need multiple editable areas. Whatever is inside the repeat gets repeated.
What you want to do is to give the control a custom property "boolean editMode" so you can render that one line to be edited - if that's the UI pattern you want to follow.
You also could consider a dojo table with Ajax which allows for a familiar spreadsheet UI
I have an application that makes use of the Application Layout Control. The UI has two tabs defined in the Title Bar section. The UI also contains a Navigator control in the sidebar that allows users to select links to open other pages. What I am having troubles with is keeping the current tab set as the active tab when users click on links in the current navigator.
The "configuration" property of the Application Layout Control is a complex type, which in turn supports all the properties that define the layout itself. One of those properties is "navigationPath". If Netflix used this control on their site, the value of that property when viewing the movie information page for Ghostbusters might look something like:
/home/genres/comedies/541018
So this property can be thought of as a way of describing the page's current location in the "site map" using *nix filepath syntax.
Each titleBarTab is also a complex type; one of its properties is "selection". This property is intended to be given a value that matches part or all of the current navigationPath for the overall layout. So, continuing the Netflix example, you might define your tabs like this:
<xe:this.titleBarTabs>
<xe:pageTreeNode
page="/genre.xsp"
label="Action"
queryString="genre=action"
selection="/home/genres/action/*" />
<xe:pageTreeNode
page="/genre.xsp"
label="Comedy"
queryString="genre=comedies"
selection="/home/genres/comedies/*" />
<xe:pageTreeNode
page="/genre.xsp"
label="Drama"
queryString="genre=dramas"
selection="/home/genres/dramas/*" />
</xe:this.titleBarTabs>
On the page for Ghostbusters, then, because navigationPath property for the layout matches the pattern defined for the selection property of the pageTreeNode with a label of "Comedy", that tab will appear selected, but the others will not.
Also perhaps worthy of note is that the layout configuration also includes a property called "defaultNavigationPath". The value of this property will be compared against the selection property of each titleBarTab if the navigationPath property has no value. So you typically want to set this to a path that would cause the first tab to appear selected.
Bruce, if I am reading this right, I ran into a similar problem a while back. Does this help at all? Setting a sessionScope variable for a TitleBar tab