Set "autocomplete" property of Xpages form - xpages

I need to set the 'autocomplete' property of the form in my Xpage. I know how to set it on fields, but I need to completely prevent the browser from autofilling my forms.

Add <xp:form> to your XPage and set property autocomplete="off":
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<xp:form autocomplete="off">
<xp:inputText>
...
</xp:inputText>
...
</xp:form>
</xp:view>
This will render the <form...> with autocomplete property:
<body class="xspView tundra">
<form id="view:_id2" method="post" action="/XPages/Stacky2.nsf/a.xsp" class="xspForm"
enctype="multipart/form-data" autocomplete="off">
This prevents the browser from autofilling of all fields on your form.

Related

Form field custom attribute

I am building a form by using the Kentico Form Application.
I need to add in other attributes into the input fields. But the input field seems like not editable. I am editing it in the Layout tab, and view in html source
<div class="form-group">$$label:Message$$* $$input:Message$$
<p class="charCount"><span>0</span>/400</p>
</div>
It suppose to be look like this
<div class="form-group">
<label for="message">Cover message*</label>
<textarea class="form-control" name="message" id="message" maxlength="400" required></textarea>
<p class="charCount"><span>0</span>/400</p>
</div>
But how can I make it by using the Kentico Form Application?
CSS classes (class) and validation rules (maxlength) can be added and modified in Forms->Edit form->Fields->Select field. You can also wrap the fields in custom HTML code by setting the HTML envelope.
Regarding identifiers (id,name), you can't control them unless you create a custom form control.

Xpages Link Open New Browser Tab

I have found a few similar questions to this in stackoverflow but nothing exactly matches. I am attempting to amend an Xpages project where the search results are shown in a Dynamic View Panel. The first column of the search results is a link that opens the record in the same page. What I want to do is have this link open the record in a seperate page. It is the "Dynamic" part of the view that is confusing I think as there is no "Column Name" or "Column View" to add in a window.open or a target="_blank" that I can see. How would I go about this please?
The relevant section of the XPage only has the following;
<xp:panel id="maincontentpanel">
<xe:dynamicViewPanel rows="30" id="dynamicViewPanel1" width="100%">
<xe:this.data>
<xp:dominoView viewName="(keywordsUser)" var="view">
</xp:dominoView>
</xe:this.data>
</xe:dynamicViewPanel>
</xp:panel>
When viewing the source in HTML the clickable column shows the following;
<tr>
<td class="xspColumnViewStart">
<a id="view:_id1:cc4cconeuilayout:OneUIMainAreaCallback:dynamicViewPanel1:0:_id6:_internalColumnLink"
href="*routetoourrecord*";action=editDocument"
class="xspLinkViewColumn">2014</a>
</td>
Dynamic View Panel has a property "target" in All Properties where you can select "_blank". This should add the attribute target="_blank" to the links in first column. But, unfortunately, this works in Notes client only.
So, there is no property we just can set. Luckily, rendered links have an own class "xspLinkViewColumn" (see your source HTML example). With dojo.query we can get all elements with this class and add the target attribute on client side.
Just add following event code to your XPage:
<xp:eventHandler
event="onClientLoad"
submit="false">
<xp:this.script><![CDATA[
dojo.query(".xspLinkViewColumn").attr("target", "_blank");
]]></xp:this.script>
</xp:eventHandler>
All links will get the attribute target="_blank" this way and documents will be opened in a new browser tab.
Just to let know the code does not to work with the Bootstrap theme.
Instead you can use
dojo.query('[id$="_internalColumnLink"]').attr("target", "_blank");

JQuery Script works with new document, but not with saved ones

Here is what I have :
Lotus database (8.5.3) with jQuery and jQueryUI included
form1 is a form with just one field.
It is set to
"On open - Automatically enable Edit mode"
"On Open - Display XPage instead : xpage1"
"On Web Access - Display XPage instead : xpage1"
xpage1 is an xpage. It contains :
An inputBox linked to the field in form1
A button that calls a small script, just alert("some text")
A jQuery script is included on the page. It's a draggable Panel. It's all there is to it. Just a panel that you can drag on the page.
view1 is a view displaying documents based on form1
Now my problem :
If launch the Xpage in my browser (Chrome or IE), it behaves normaly : I can see my alert when I click on the button, I can drag my panel on the page, I can fill my field, I can save the document.
When I open it later, however, the Xpage opens and display the field data, but my scripts don't work : impossible to save the document, move the panel, display the alert.
If I launch the Xpage in my Lotus client, it works !
If I remove my jQuery reference and my movable panel, the other scripts work.
Did I forget something ? Is it some kind of known problem?
Here is my Xpage source, for reference :
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<!-- THIS WHERE I MAKE JQUERY AVAILABLE -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<!-- THIS IS MY DATA BINDING -->
<xp:this.data>
<xp:dominoDocument var="ds1" formName="form1"></xp:dominoDocument>
</xp:this.data>
<!-- THIS IS MY FIELD -->
<xp:br></xp:br>
Field1 : <xp:inputText id="field1" value="#{ds1.field1}"></xp:inputText>
<xp:br></xp:br><xp:br></xp:br>
<!-- THIS IS MY PROMPT BUTTON -->
<xp:button value="Alert" id="button2">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[alert("Waring!")]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br><xp:br></xp:br>
<!-- THIS IS MY MOVABLE PANEL -->
<xp:panel id="myPan01"
style="height:120px;width:120px;background-color:rgb(0,64,128)">
<xp:this.attrs>
<xp:attr name="class" value="dragItem"></xp:attr>
</xp:this.attrs>
<xp:div style="text-align:center">
<xp:span style="font-weight:bold;color:rgb(255,255,255)">
</xp:span>
</xp:div>
<xp:div style="text-align:center">
<xp:span style="font-weight:bold;color:rgb(255,255,255)">
Move Me!
</xp:span>
</xp:div>
</xp:panel>
<script>
XSP.addOnLoad(function(){ $(".dragItem").draggable({ grid: [
40,40 ]}); })
</script>
<xp:br></xp:br>
<!-- THIS IS MY SAVE BUTTON -->
<xp:button value="Save" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="false" save="true">
</xp:eventHandler>
<!-- THIS IS THE END... -->
</xp:button>
</xp:view>
You're including jquery via a standard HTML <script> tag, this may lead to problems since this will be placed in the HTML body instead of the header.
Use the XPage's resource's property. Add some client side JavaScript library with in the XPage ressources properties, then go to the source of the XPage, locate the xp tag that includes the JavaScript library and change it's URL so that your jquery resource is included.
I'm not 100% sure that this solves your problem, but since your code looks good otherwise it's worth a try.

How to pass and display a custom control in another custom control

I am creating an application where I want to add data to a form in a wizard format. I will have a series of modal dialogs that step through the data entry process. I am using the Bootstrap modal dialogs. I intend on saving each step to a managed bean. The application needs to work on all devices, which is why I am doing it this way.
I am trying to create a single custom control to hold the modal window, and then pass the window title, mainContent, button title to the control using custom properties. The window title, and button title work fine. The "mainContent" property contains the XML code for the custom control to display in the window. My question is how to I make the control display the actual custom control content vs the XML string of the custom control name. My goal is to make a reusable snippet.
I have tried using 'Include Page' which makes the whole xpage disappear. I have tried using the 'dynamicContent' control but have been unable to get it to work. There is a very distinct possibility I am not using that control correctly. I left that code in there. Sidenote: xc:layout on the xpage is my Bootstrap layout that I don't think factors in.
XPage code - all that is there is calling the modalWindow custom control:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xc:layout>
<xc:modalWindow button_title="Save and Continue to Step 2"
window_title="Create New PO - Step 1 of 7">
<xc:this.mainContent><![CDATA[<"xc:NewPO_Step1 />"]]></xc:this.body>
</xc:modalWindow>
</xc:layout>
Here is the code for the custom control "modalWindow"
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<a href="#myModal" role="button" class="btn" data-toggle="modal">
Begin Creating New PO
</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
×
</button>
<h3 id="myModalLabel">
<xp:text escape="true" id="computedField3"
value="#{javascript:compositeData.window_title}">
</xp:text>
</h3>
</div>
<div class="modal-body">
<xe:dynamicContent id="dynamicContent1"><xp:text escape="true" id="computedField2" value="#{javascript:compositeData.mainContent}">
</xp:text><xp:this.facets>
</xp:this.facets>
</xe:dynamicContent>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Cancel
</button>
<button class="btn btn-primary">
<xp:text escape="true" id="computedField4"
value="#{javascript:compositeData.button_title}">
</xp:text>
</button>
</div>
</div>
You can use "Include Page" adding ".xsp" to the name of custom control:
<div class="modal-body">
<xp:include id="include1">
<xp:this.pageName><![CDATA[${javascript:compositeData.mainContent + ".xsp"}]]></xp:this.pageName>
</xp:include>
</div>
Add mainContent="nameOfYourCustomControl" to modalWindow call and you have the flexibility you are looking for:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xc:modalWindow button_title="Save and Continue to Step 2"
window_title="Create New PO - Step 1 of 7" mainContent="step1">
</xc:modalWindow>
</xp:view>
In this example you have to create a custom control "step1" which contains all the content.

How do I hide a menu item with an <li> tag in XPages

I have a traditional menu that us based on this convention
<ul>
<li><xp:link>menu link 1</xp:menulink></li>
<li><xp:menulink>menu link 2</xp:menulink></li>
</ul>
I want to selectively render the menu link 2 based on some logic.
I can render the <xp:link> fine but as the <li> is a HTML tag rather than an XPages Tag the rendering cannot be controlled.
I noticed that there is a tagName property for <xp:text> but not for <xp:link>.
see : http://xpagesblog.com/XPagesHome.nsf/Entry.xsp?documentId=4EB7314545EE0C19852578CB0066CE4C
What is the easiest way to manage this without using repeats etc ?
You can also wrap the entire <li>...</li> tag in an <xp:panel> tag that has a rendered script on it. Don't give the xp:panel an ID and no extra code is sent to the browser.
If you are using the Extlib or UP1 then you can also use the <xe:listcontainer> tag. It renders each direct child entry as a list item so you would end up with code similar to..
<xe:listcontainer>
<xp:link> ... </xp:link>
<xp:link rendered="renderscript"> ... </xp:link>
<xp:link> ... </xp:link>
</xe:listcontainer>
In this case there is no need for you to add the <ul> or <li> tags in the code, the ExtLib will look after that for you.
Instead of the LI tag, use a panel and set the tagName to "li" (new since 8.5.3):
<ul>
<li>
<xp:link>menu link 1</xp:link>
</li>
<xp:panel
rendered="#{test == true}"
tagName="li">
<xp:link>menu link 2</xp:link>
</xp:panel>
</ul>
I have used xp:span in the past and it has worked fine.
<xp:span>
<xp:this.rendered><![CDATA[#{javascript:document1.isEditable()}]]></xp:this.rendered>
<li>YOUR TEXT HERE</li>
</xp:span>
This works:
<ul>
<li>Static item 1</li>
<xp:text escape="false" id="computedField1" tagName="li" rendered="false">
<xp:this.value><![CDATA[#{javascript:'menu link 2'}]]></xp:this.value>
</xp:text>
<li>Static item 3</li>
</ul>
You can of course compute the rendered tag on xp:text.
If your not worried about whether or not the code shows you can always just change the class on the li systematically using ssjs
<ul>
<li class="#{javascript:return myclassname;}"><xp:link>menu link 1</xp:menulink></li>
<li><xp:menulink>menu link 2</xp:menulink></li>
</ul>

Resources