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.
Related
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>
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 am using ace:daaTable and other ice component on the same xhtml page .
when I click oמ ice:commandButton the page style is changing.
I tried to define "rime" style on the web.xml but it doesn't help.
when I defined "none" style
param-name :org.icefaces.ace.theme
param-value:none
the clicking on the ice:commandButton save the page style, but I am failing to change the table style to "styleClass="oddRow, evenRow" (that was the style I used on ice:dataTable in my previos IceFaces 1.8 project with"xp" style. )
can someone please explain how to define this styleClass on the table,without changing the page style on each click.
and give me an example that show how to use styleClass on the ace:component
thanks
Tami
To include rime.css you can include below line in you head section.
<link rel="stylesheet" type="text/css"
href="./xmlhttp/css/rime/rime.css" />
If you want to specify your own styleclass you can use like this.
<ace:dataTable style="width:200px; height:200px; cellspacing: 1px;
cellpadding:1px;" ></ace:dataTable>
If you want to use styleclass attribute then you specify external css and include the name.
I'm trying to set icon to <aui:button> like on this tutorial.
But solution described there doesn't work well in my case, because I have a table and on each row I have a button with different resourceUrl. Like this:
<portlet:resourceURL id="saveReport" var="saveReportURL">
<portlet:param name="reportId" value="${report.reportId}" />
</portlet:resourceURL>
<aui:button onclick="location.href = '${saveReportURL}'">
Is it possible to set icon in <aui:button> without using JavaScript as described in tutorial?
Thanks
You can write this below code for setting icon in liferay alloy button
<aui:button type="cancel" cssClass="btn-info" icon="icon-upload-alt" iconAlign="right" value="upload" />
you need to use the icon attribute for this setting "Icon glyphs"
you need to use cssClass for adding extra design button class for the designing
you need to set iconAlign attribute for left or right side of the button text value
You should be able to add an icon to a button without using JavaScript by adding one of these Icon CSS classes to your button. For example, if you wanted to create a button with a calendar icon, your code should look something like this:
<aui:button class="icon-calendar" ... />