I need to customize the output produced by the standard application layout control such as adding HTML code to the label (e.g. to specify fa icons that nest the label):
<xe:this.configuration>
<xe:simpleResponsiveConfiguration>
<xe:this.navbarUtilityLinks>
<xe:basicLeafNode>
<xe:this.label><![CDATA[<i class="fa fa-bell">Notification(s)</i>]]></xe:this.label>
</xe:basicLeafNode>
</xe:this.navbarUtilityLinks>
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
Unfortunate, the output displayed is not escaped and the result is
<i class="fa fa-bell">Notification(s)</i>
instead of
Notification(s).
Is there any way to set escape="false" /"true" for the options label in an application layout control?
The tree nodes are a bit limited in this respect. They weren't designed to be able to add additional html inside the rendered output. You've tried to hack it in there using the label property, but that will always be escaped.
Steve's suggestion to set fa fa-bell as the styleClass of the node itself works, sort of. It would display the icon and text, but it messes up the font style of the label text. And if you change the font of the label, it messes up the icon, as they are all part of the same DOM element.
However, in the ToDo sample application (that is now part of the ExtLib release), there is an example of doing what you want using jQuery, in the simpleLayout custom control. It adds the icons during the onClientLoad event of the XPage. If you re-work that code, you could use it to do what you want:
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[
$(".applayout-utility-links li:nth-child(1) a").prepend("<i class='fa fa-bell' style='margin-right:5px'></i>")]]>
</xp:this.script>
</xp:eventHandler>
Related
I am building an XPages application based on a custom theme I bought.
I want to use include pages to display custom 'widgets' in the header
Unfortunatelly, the included pages are rendered in a tag, which is incompatible with the css stylesheet from the theme.
Here's the code including the pages (the idea is to make this configurable in the future)
<xp:panel styleClass="navbar-account">
<ul class="account-area">
<xp:include pageName="/nav_VisitIn.xsp"></xp:include>
<xp:include pageName="/nav_MyVisit.xsp"></xp:include>
<xp:include pageName="/nav_Profile.xsp"></xp:include>
</ul>
</xp:panel>
The rendered html looks something like this
The css for the list item tags (and all elements below) are similar to
.navbar-account .account-area > li {...}
I want to avoid having to modify all related styles from the theme.
Is there a way to make sure the include page is rendered without the div tag or can I remove the generated div tag (but not its content) from the DOM?
Try adding disableOutputTag="true" in your <xp:include> tags.
I have an application with one XPage. It has these custom controls(cc):
ccHeader
ccMenu
ccContent
ccFooter
Custom control ccContent has a combobox, with list of Views in sessionScope and dynamic view panel from extension library for XPages. This combobox has an event OnChange defined to partial update dynamic view.
What do I need?: Combobox with view list will be deleted and after that I need to assign this partial update function to five links, which are located on ccMenu custom control. So, i click on link in ccMenu, it returns some view name, assigns it to dynamic view and makes partial update.
How to get id of this dynamic view in ccMenu to call partial update?
Assuming what you mean is that you want to have a clean way to let the buttons know which area to partial-refresh when changed:
You could add a property to the ccMenu control along the lines of "viewRefreshId" and pass in the ID of the area to refresh, so you'd end up with a button like this:
<xp:button id="viewChanger1" value="View 1">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="${compositeData.viewRefreshId}">
<xp:this.action><![CDATA[#{javascript: viewScope.selectedView = 'View 1' }]]></xp:this.action>
</xp:eventHandler>
</xp:button>
Now, there's a question of whether you should try to pass in an ID from something contained within another CC from the main XPage, and I try to avoid that - it would PROBABLY work, but it's a bit messy. I tend to architect similar things so that the part to be refreshed is directly on the XPage (which is to say, I don't use "content" custom controls), so I end up with something like this:
<xc:viewSelector viewRefreshId="dynamicViewContainer"/>
<xp:div id="dynamicViewContainer">
<xe:dynamicView>
<xe:this.data>
<xp:dominoView var="view1" viewName="#{viewScope.selectedView}"/>
</xe:this.data>
</xe:dynamicView>
</xp:div>
The extra container div comes from experience that I had a while ago where refreshing the dynamic view directly caused rendering problems, but I don't know if that's still the case (or if I had run into some other problem).
How can I style the xe:tabBar and xe:tabBarButton control so it looks as a "native" footer with buttons (including icons, text)?
To have your tabbar stay at the bottom of the page, use a Dojo ScrollablePane (dojox.mobile.ScrollablePane). If you're using Domino 9, this widget is already available and can be implemented like:
<xe:appPage
id="appPage1"
pageName="firstpage">
<xe:djxmHeading
id="heading1"
label="Scrollable Pane Demo">
</xe:djxmHeading>
<xp:div
id="scrollableContent"
dojoType="dojox.mobile.ScrollablePane">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="fixedFooter">
<xp:this.value><![CDATA[#{javascript:var mobFooter = getComponent("tabBar1");
return mobFooter.getClientId(facesContext);}]]></xp:this.value>
</xp:dojoAttribute>
<xp:dojoAttribute name="fixedHeader">
<xp:this.value><![CDATA[#{javascript:var mobHeader = getComponent("heading1");
return mobHeader.getClientId(facesContext);}]]></xp:this.value>
</xp:dojoAttribute>
<xp:dojoAttribute
name="scrollDir"
value="v">
</xp:dojoAttribute>
<xp:dojoAttribute
name="fixedHeaderHeight"
value="54">
</xp:dojoAttribute>
<xp:dojoAttribute
name="fixedFooterHeight"
value="54">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
YOUR CONTENT GOES HERE
</xp:div>
<xe:tabBar
id="tabBar1"
barType="segmentedControl">
</xe:tabBar>
</xe:appPage>
The Header and footer must stay outside the ScrollablePane and the following dojo attributes are required for functionality:
fixedHeader
fixedFooter
scrollDir
fixedHeaderHeight
fixedFooterHeight
If you're using Domino 8.5.3 then you will have to add the ScrollablePane and all of it's dependencies to your NSF which I cover in a blog post here. You can find additional documentation here.
You will need to implement a version of the dojo scrollableView or scrollablePane in order to get the navigation bar to reliably position itself at the bottom of the mobile device. Watch out for a video from Keith Strickland on NotesIn9 that explains how to do this if you have any troubles.
Using Domino 9.0 we at Red Pill Development have found that styling the NavBar with CSS alone does not guarantee the navigation bar will always drop to the bottom of the screen on each application page transition and/or screen orientation and/or partial refresh.
This is currently not possible with the current set of XPages mobile controls. We have logged PHAN962BJ8 to address this in the future.
I'm using the Extension Library for creating XPages and I want to use a view, where i can use some inline buttons (buttons in every row of the view) and I also want to use the functionality of the data view where I can expand the content of the current row.
I want to use one of those inline buttons, to expand the content of this row, because before the functionality of this button can be executed, the user has to enter some data in an inputText-field.
So the questions are?
- How can I add inline buttons (using SSJS) to a data view?
- Do you know any other way to solve my problem?
Thanks!
In the Extlib database the expansion with a custom form was done using a link. I would stick to the links -> gives you the most options (client side, server side). Stick to those. If you really need that "buttony" look (which does IMHO not look very much like a web application), use CSS to style the link to look like a button. The OneUI has instructions for that (or steal them from Twitter bootstrap).
The OneUI is worth another look suggesting a different visual clue for expand/collapse.
You should be able to do this within the confines of a dataView by adding a facet for "detail" and using collapsible detail.
For the dataView, set collapsibleDetail="true", add in a panel to the detail facet, then put the elements you want to display when they click to expand in that panel.
<xe:dataView id="dataView1" collapsibleDetail="true" detailsOnClient="true">
<xp:this.facets>
<xp:panel xp:key="detail">
<xp:button id="Mybutton" value="My button"></xp:button>
<xp:label value="This is the label" id="label1" for="Mybutton"></xp:label>
</xp:panel>
</xp:this.facets>
<xe:this.summaryColumn>
<xe:viewSummaryColumn columnName="lastname"></xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xe:this.extraColumns>
<xe:viewExtraColumn columnName="city"></xe:viewExtraColumn>
<xe:viewExtraColumn columnName="state"></xe:viewExtraColumn>
<xe:viewExtraColumn columnName="zip"></xe:viewExtraColumn>
</xe:this.extraColumns>
<xe:this.data>
<xp:dominoView var="view2" viewName="ByName-First"></xp:dominoView>
</xe:this.data>
</xe:dataView>
Now, I'm not positive on how to bind it to the contents of the documents displayed, but I'm sure there's a way. I know how to access the document in a repeat, but not in a dataView, so I would probably do it in a repeat (unless you figure it out and post it to us here!)
Hopefully, that moves you in the right direction.
I'm using the xe:namePicker in several places in our application. I would like to style the picker to reflect the application style.
So I gve it a styleClass using the dojo attribute. Sie screenshot of sourcecode
But the style is not used because the picker has its own inline style.
How can I get rid of the inline style to use my own styleclass?
you can override the inline styles with something like this in your css:
.lotusdialog [style] {
background: yellow !important;
}
The [style] overrides any inline styles added to the element before it, in this case with the class .lotusdialog
I just tried it using the "class" dojo attribute, and unlike you got it to work:
Here's the name picker's xml code:
<xe:namePicker id="namePicker1" for="inputText7">
<xe:this.dataProvider>
<xe:dominoNABNamePicker></xe:dominoNABNamePicker>
</xe:this.dataProvider>
<xe:this.dojoAttributes>
<xp:dojoAttribute name="class" value="myDlgClass">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
</xe:namePicker>
This references a styleClass from a .css resource attached to the Xpage.
As you can see in the screenshots the class is attached to name picker's content widget, and it does work , too.
I don't know whether this method has an advantage over the other one recommended by Peter but maybe it can come in handy one way or another.