I have a combo box with descriptions that are long in length. I'm trying to find the best way to show the full description. One thing I came across was the title attribute which causes a popup to show on hover. I tried to use the "attrs" property in XPages to add a title property, but xp:selectItem and xp:selectItems "attrs" do not appear in the HTML output.
Anyone have any ideas or a different method to try? Thanks for any thoughts.
EDIT: I ended up changing the combo box into a dialog pick list. This satisfied my requirements.
Did you consider using xe:djComboBox from Extension Library?
See http://www-10.lotus.com/ldd/ddwiki.nsf/dx/djComboBox_Dojo_Combo_Box_ddxl853
<xe:djComboBox id="djComboBox1" value="#{sessionScope.djComboBox1}"
tooltipPosition="auto">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="autoComplete" value="false">
</xp:dojoAttribute>
<xp:dojoAttribute name="labelType" value="html">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
<xp:selectItems>
<xp:this.value>
<![CDATA[#{javascript:return new Array("<b>Apples</b>|apples", "Oranges|oranges")}]]>
</xp:this.value>
</xp:selectItems>
</xe:djComboBox>
Each element in array should have following format "label|value|description|disabled", where only label is mandatory. See: http://publib.boulder.ibm.com/infocenter/domhelp/v8r0/index.jsp?topic=%2Fcom.ibm.designer.domino.ui.doc%2Fwpd_controls_cref_selectitems.html
If the description of your items is so long that they dont fit in a combobox you could either:
Change the length of the combobox using css.
Retrieve the description and only display a portion of it (lets say first 100 chars ).
Descriptions in comboboxes should be 'descriptive' ( hence the word description ). I would go for the second approach and add something in front of the description so the description is still usefull for the users.
For instance when have a list of projects. These titles are 100+ characters long. Instead of displaying the full description. Cut them of and use the project code as a prefix so that it will display
ProjectCode - {first 100 chars of description}.
This way users still know what they select because of the project code.
Related
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 know this is probably easy, but I can't figure it out.
Have an Xpage with 6 fields or so, bound to underlying form. User will enter some data. The possible values for one field, location, are in a view in a different db. I want the user to be able to type in the first few characters and be able to select the value.
I think this should be easy, and I am just missing something. Any help would be greatly appreciated.
Use typeAhead. Here's an example (assuming the lookup field is in column 1 of the view called viewName) where type ahead starts after 2 characters:
<xp:inputText id="test" value="#{document.test}">
<xp:typeAhead mode="partial" minChars="2" ignoreCase="true" id="typeAhead1">
<xp:this.valueList><![CDATA[#{javascript:return #DbColumn(database.getServer() + "!!" + "path/db.nsf", "viewName", 1);}]]></xp:this.valueList>
</xp:typeAhead>
</xp:inputText>
In the properties of the edit box there's type ahead. Enter #DbColumn(....); that should do the trick. Example here: http://www-10.lotus.com/ldd/ddwiki.nsf/m_Home.xsp?documentId=D74C33EADB3DC730852575F600668099#mobileViewer
I have a number of custom controls layed out on an xpage. I want these controls to be displayed in the order of a setting in a notes document
So my xpage might look like this in DDE
CustomControl1
CustomControl2
CustomControl3
CustomControl4
but when the custom control is displyed on the webpage the custom controls should be displayed in the following order (based on the setting document)
CustomControl4
CustomControl1
CustomControl2
CustomControl3
anyone have any ideas how to accomplish this (server side)
You can use the xp:switchFacet in combination with a xp:repeat to calculate the order at runtime like this:
<xp:repeat
id="repeat1"
rows="30"
var="rowEntry">
<xp:this.value><![CDATA[#{javascript:var arr = ["Control1","Control3","Control2"];return arr;}]]></xp:this.value>
<xe:switchFacet
id="switchFacet1"
selectedFacet="#{javascript:rowEntry}">
<xp:this.facets>
<xp:panel xp:key="Control1">Control1</xp:panel>
<xp:panel xp:key="Control2">Control2</xp:panel>
<xp:panel xp:key="Control3">Control3</xp:panel>
</xp:this.facets>
</xe:switchFacet>
</xp:repeat>
Instead of the Array arr you can use data based on a document or xsp.propertie. The Output of this code is Control1 Control3 Control2 and in your Designer you have your controls inside switchFacet in following order: Control1 Control2 Control3.
Without knowing the real pain of your project I can only assume that the individual position needs to be defined at runtime, or something like that.
In general: controlling a page's layout is a pure CSS job. On the resulting page almost anything can be positioned almost anywhere within the page's range, and it doesn't matter where it was placed at design time. So, if you enclose your custom controls within their own containers (panels / divs) then you should be all set. You might define positioning classes in CSS and then have some SSJS code decide which class is assigned to what div.
If for example you have a custom control for each day of the week, and you always want to have the current day at the top-most position, then you could define 7 css classes as in ".today", ".todayPlus1", ".todayPlus2" ... ".todayPlus6". Write your positioning rules for each class. And finally compute each panel's styleClass property based on the current week day.
How do you disable the CkEditor for Rich Text fields so you only render a basic <texarea> tag with no editor whatsoever?
I'm sure I must be missing something obvious but I don't see to be able to create a document using an XPage with a field stored as RT without using the CkEditor. I want to be able to prompt the user to enter 'a lot' of text but only via a simple multiline input and have that stored as RT.
If I have a..
form with a RT field
an XPage with a xp:inputTextarea control bound to said field
a save button
a documentdatasource linked to that form
on save the document is created with the field value but it's stored as text rather than RT. Adding in computeWithForm to the dds properties doesn't help.
Is the only way to have some kind of querysave or custom converter to manually turn it into RT?
If I use the xp:inputRichText control it saves fine as RT but I don't want the CkEditor in the UI, just a basic . Is there a someway to do a editor=plain to the xp:inputRichText control?
I've been looking at trying to override the dojoType or renderType with no luck
Thanks!
You can use <xp:customConverter> in <xp:inputTextarea> to convert the text to rich text item.
For getAsObject you would write this code (document1 is your data source):
var rtitem:NotesRichTextItem = document1.getDocument().createRichTextItem("rtfield");
rtitem.appendText(value);
return null; // Return null as field has already been created
And for getAsString you would simply fetch the contents of rich text field and textual value.
value.getContentAsText()
The variable value is a standard variable which contains the actual value of the field. So you code for <xp:inputTextarea> would look something like this:
<xp:inputTextarea id="inputTextarea1" value="#{document1.rtfield}">
<xp:this.converter>
<xp:customConverter getAsString="#{javascript:value.getContentAsText()}">
<xp:this.getAsObject><![CDATA[#{javascript:var rtitem:NotesRichTextItem = document1.getDocument().createRichTextItem("rtfield");
rtitem.appendText(value);
return null;}]]></xp:this.getAsObject>
</xp:customConverter>
</xp:this.converter>
</xp:inputTextarea>
NOTE: If you wish to update the rich text field using the text area then you need to write additional code in getAsObject
I am not sure how to manipulate the field type. I assume that Domino know what is going on with the control in much the same way that the custom controls are formatted to match the content type. You might be able to force the content type.
I can present this as an alternative. You can do a custom toolbar in the ckeditor to remove the toolbar and make it appear like a normal text field. There may be UI complications with doing so though. You would also have a status bar to contend with to make it appear as a plain white box. There should be another dojo attribute type for this.
This code will give you a rich text box with no toolbar
<xp:inputRichText id="inputRichText1"
value="#{document1.content}">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="toolbar">
<xp:this.value><![CDATA[#{javascript:var myToolbar = "[['']]";
return myToolbar}]]>
</xp:this.value>
</xp:dojoAttribute>
</xp:this.dojoAttributes>
</xp:inputRichText>
In liferay message board thread if we click on "Flag" then a window pop-up is coming with drop down values like "Violent & repulsive", "Spam" etc.
I want to change these text with my own words. I found code inside tomcat-6.0.18\webapps\ROOT\html\portlet\flags\edit_entry.jsp:
<option value="<%= reason %>"><liferay-ui:message key="<%= reason %>" /></option>
which is displaying the drop down but how can I edit the drop-down menu with my own words?
If anyone can suggest me how to proceed for here will be great help for me.
Thanks.
One way (easiest) is to override the following property in portal-ext.properties:
flags.reasons=sexual-content,violent-or-repulsive-content,My own flag,My content,Your violent acts
Hope this helps.
Extend this (to make it multilingual) by providing a new localization key instead of just a text. You can use a hook to introduce a new localization key into the portal, then just use the key here. If the key cannot be found (like in this sample e.g. "My own flag") it will be shown nontranslated.