For an xp:inputtext control I would like to add the attribute [aria-required='true'] but I am wondering how I could achieve that via the attributes property without having to set a label?
I have tried:
<xp:this.attrs>
<xp:attr>
<xp:this.value><![CDATA[[aria-required='true']]]></xp:this.value>
</xp:attr>
</xp:this.attrs>
But then I get as error message:
Description Resource Path Location Type Required property "name" for
xp:attr is not present.
I am not sure I understand what you mean by "without having to set the label".
<xp:attrs> holds a collection of one or more <xp:attr> components. Then the <xp:attr> component holds 2 attributes name= (String only) and value= (String only).
So if you want to set a custom attribute for the HTML counterpart tag you must write:
<xp:inputText ...>
<xp:this.attrs>
<xp:attr name="aria-required" value="true" />
</xp:this.attrs>
</xp:inputText>
If you want to kind of automate the presence of certain attributes you can also define a theme rule and apply it (of course if you have other styles and/or rules usually applied to the input you must make sure to repeat them again in the new rule):
The theme rule
<control>
<name>Input.AriaRequired</name>
<property>
<name>attrs</name>
<complex type="xp_attr">
<property>
<name>name</name>
<value>aria-required</value>
</property>
<property>
<name>value</name>
<value>true</value>
</property>
</complex>
</property>
</control>
The input with the applied theme
<xp:inputText themeId="Input.AriaRequired" ... />
Related
I want to set a favicon in XPages. I am using Domino 8.5.3 with the latest 8.5.x version of the extlib. As application theme oneuiv2.1 is used.
I tried setting the pageIcon attribute in the XPage without success. Adding a link attribute to the header using
<xp:this.resources>
<xp:headTag tagName="link" rendered="true" loaded="true">
<xp:this.attributes>
<xp:parameter name="rel" value="icon"></xp:parameter>
<xp:parameter name="href" value="favIcon.png">
</xp:parameter>
<xp:parameter name="type" value="image/png">
</xp:parameter>
</xp:this.attributes>
</xp:headTag>
</xp:this.resources>
did not change the favicon. I found in various blogs, that I have to add a control to the application theme, for example:
<control>
<property>
<name>pageIcon</name>
<value>favicon.ico</value>
</property>
</control>
However I use the provided oneUi theme and do not want to create a custom theme. Is there a way to either set the favicon directly or modify the theme without creating a complete new one?
I think you are missing the control name in your theme rule.
Here is the syntax of the theme rule that works for me. (Taken from Tim Tripcony's HowYaBean demo application referenced on NotesIn9 and downloadable from here). I use it a ton. It takes the icon from the NotesDatabase (remember the one from the old Notes workspace that has not yet been pried out of my cold dead fingers). It also works with image or file resources.
<control override="false">
<name>ViewRoot</name>
<property>
<name>pageIcon</name>
<value>/$icon</value>
</property>
<property>
<name>pageTitle</name>
<value>#{database.title}</value>
</property>
</control>
This works for me - icon shows in tab bar and shortcut created from application URL.
Image resource (PNG image) with name img_ApplicationIcon16. The name is generic for every application, but each NSF contains different image.
Every XPage has property pageIcon="/img_ApplicationIcon16"
It renders as <link rel="SHORTCUT ICON" href="/path/database.nsf/img_ApplicationIcon16">
In my case, I did not want to use theme, too.
Import the favicon.ico file as file resource instead of image resource
Add the following code to the selected theme:
<control>
<name>ViewRoot</name>
<property>
<name>pageIcon</name>
<value>/favicon.ico</value>
</property>
</control>
Set up the application to use the theme containing the reference for the favicon.
Create a new xpage for testing, or delete the browser cache.
This works for me properly. In the browser window you should see the folloving source:
<link rel="SHORTCUT ICON" href="/db.nsf/favicon.ico">
(db.nsf is your database.)
If still not work check the xpage: "All properties-styling-disableTheme" should not be enabled.
I am using a theme for my XPage application to set global look&feel settings so my configuration for the viewRoot looks like this:
<control dojoTheme="true">
<name>ViewRoot</name>
<property>
<name>pageIcon</name>
<value>/favicon.ico</value>
</property>
<property>
<name>style</name>
<value>#{javascript:
var response = facesContext.getExternalContext().getResponse();
response.setHeader("X-UA-Compatible", "IE=8");
}</value>
</property>
<property mode="concat">
<name>styleClass</name>
<value>claro</value>
</property>
</control>
Although I use the mode="concat", which I thought just adds (like array.concat) my properties to my viewRoot but it always overwrites it, so that my <body> looks like this:
<body class="claro"... instead of:
<body class="xsp lotusui claro"...
I experienced this problem with other <controls>/<properties> as well.
My current solution is that I set the property value to xsp lotusui claro not just only claro to prevent my body from loosing all oneui/xsp styles. Anyone got a idea why the mode="concat" is not working in my example? or is this mode for something else?
I could not find a good documentation of all theme properties so if someone got a good link, I would be glad if he could share it.
EDIT:
As I am also working on a XPages Theme at the moment I got more curious and played a little bit with this. As far as I can see your code works perfectly fine . In my Tests I experienced that you can concat a style definition to a pre-defined styleClass. So you can create an XPages and define a body style class like this with a body-styleClass predefined within the XPage:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" styleClass="mystyle">
<xp:button value="Label" id="button1" themeId="bt"
styleClass="oink">
</xp:button>
</xp:view>
Using a Theme you can now add another (or even multiple) styleClasses:
<control>
<name>ViewRoot</name>
<property mode="concat">
<name>styleClass</name>
<value>claro</value>
</property>
</control>
In your scenario, you want to concat the styleClass definition which is added as "default" styleClass - and this seems to be an issue or conflict.
So, for now this is my conclusion. If there is anybody else having more and deeper insights I would also be interested in deeper insights into Themes and inheritance in particular.
Old comment:
As far as I know, to only add the attribute, you should set the override-property of the control to false.
Example (your code changed):
<control dojoTheme="true" override="false">
<name>ViewRoot</name>
<property>
<name>pageIcon</name>
<value>/favicon.ico</value>
</property>
<property>
<name>style</name>
<value>#{javascript:
var response = facesContext.getExternalContext().getResponse();
response.setHeader("X-UA-Compatible", "IE=8");
}</value>
</property>
<property mode="concat">
<name>styleClass</name>
<value>claro</value>
</property>
Hope that works and helps,
Michael
I know it has been a while, but did you remember to "extend" the theme you want to include the original classes from? i.e.:
<theme extends="oneui">
<control….>…</control>…
</theme>
I need to add StyleClass to a form tag generated in xPages.
I don't know if can change this control in new theme but I only need for one xPage in my app, this is the code generated:
<form id="view:_id1" method="post" action="/blabla.nsf/index.xsp"
class="xspForm" enctype="multipart/form-data">
And I need this modify class e.g:
<form id="view:_id1" method="post" action="/blabla.nsf/index.xsp"
class="newclass otherclass" enctype="multipart/form-data">
You can add the following to your theme to change the class of the form tag:
<control mode="override">
<name>Form</name>
<property>
<name>styleClass</name>
<value>newclass otherclass</value>
</property>
</control>
Update: use the following to only use this on an XPage called index.xsp:
<control mode="override">
<name>Form</name>
<property>
<name>styleClass</name>
<value>#{javascript:(view.getPageName() == '/index.xsp')?'newClass otherClass':'xspForm'}</value>
</property>
</control>
You can add your own xp:form on the XPage:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" createForm="false">
<xp:form styleClass="newclass otherclass">
... add your components here ...
</xp:form>
</xp:view>
If you disable form creation in Xpage >All Properties > createForm > False, you can create your own form with your own styleClasses; and that will replace the default form.
I started playing with themes. I was able so create CSS and associated the CSS to various table elements. Works fine.
Now I am trying to do the same with a button. But it does not seem to work. If I apply the styleclass right to the button then it works.
<theme extends="oneuiv2.1">
<resource>
<content-type>text/css</content-type>
<href>app.css</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>viewpicklistCC.css</href>
</resource>
<control>
<name>Button</name>
<property>
<name>styleClass</name>
<value>MyButton</value>
</property>
</control>
<control>
<name>HtmlTable</name>
<property>
<name>styleClass</name>
<value>PNCTable</value>
</property>
</control>
<control>
<name>HtmlTd</name>
<property>
<name>styleClass</name>
<value>PNCTableCell</value>
</property>
</control>
</theme>
.MyButton {
width:179.0px;
font-family:Arial,sans-serif;
font-size:18pt;
color:rgb(255,128,0);
font-weight:bold
}
In a theme you need to use the theme id of a control in order to target it. This is not the same as the CSS style class.
You can set the theme id manually on a control (in Style - Theme, or in All properties - Style - Theme id) and then target the control by referring to this theme id.
Or you can use the default theme id for a control. The XPageswiki contains a list of default theme ids for core controls:
http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_themes#themeID+values+for+core+controls
So in your case you need to use one of the following theme ids in order to target your button:
Button: Button.Command
Button with type=submit: Button.Submit
Button with type=cancel: Button.Cancel
I would like to set the expandLevel property for several extension libary navigators using a theme. I can set expandable and expandEffect but I can not get expandLevel to work. I am using the following in my theme:
<!-- Navigator -->
<control>
<name>Outline.Navigator</name>
<property type="boolean">
<name>expandable</name>
<value>true</value>
</property>
<property>
<name>expandEffect</name>
<value>wipe</value>
</property>
<property>
<name>expandLevel</name>
<value>#{0}</value>
</property>
</control>
I have also tried using <value>0</value> which also does not work.
Booleans need to be passed as EL, just like numbers. Pass the value of the expandable property as #{true}, otherwise it will try to assign a String value.