simple hide/show behavior....best practice? - xpages

It is embarrassing that I am having these 'newby' questions a lot, as I am late to the XPages rodeo for real work. Please be gentle.
This is BASIC functionality, needing to have a field that is initially hidden on new pages, until another combobox gets set to a certain value (think of any generic 'other' field, that is only displayed if "Other" is selected in the main field.).
Behold..my panel:
<xp:panel
id="mod"
rendered="#{javascript:document1.getItemValueString('approval') === 'modify'}">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="modification">
Describe modification
</label>
<xe:djTextarea
id="modification"
styleClass="form-control"
cols="185"
rows="25">
</xe:djTextarea>
</div>
</div>
</div>
</div>
</xp:panel>
then, my combobox (see onchange):
<xp:comboBox
id="approval"
styleClass="form-control"
style="width:400px;">
<xp:this.onchange>
<![CDATA[XSP.partialRefreshPost("#{id:mod}");]]>
</xp:this.onchange>
<xp:selectItem
itemLabel="Select one"
itemValue="">
</xp:selectItem>
<xp:selectItem
itemLabel="Approve"
itemValue="approve">
</xp:selectItem>
<xp:selectItem
itemLabel="Modify"
itemValue="modify">
</xp:selectItem>
When I change the value of the combobox in the browser, I get this error in a dialog:
I have a feeling that once I get a better grasp on how to deal with SSJS and element IDs, I will be much more productive. If anyone has a link to an article that explains this well, I would love to know it.
After all that rambling, question is how do I get this partial refresh to work?
As always, your feedback is truly appreciated.

The problem is the "mod" panel is not initially rendered so its not available/visible to the onchange event.
Put the "mod" panel in a "modParent" panel and make that the target of your partialRefresh.

Related

Does waitForElementVisible not search for input elements?

I am using nightwatch.js to perform end-to-end testing and have to use a roundabout method for a waitForElementVisible command to work as expected. For example, my code below:
browser.waitForElementVisible(".profile label[for='Admin']") // works
browser.waitForElementVisible(".profile label[for='Admin'] input[id='Admin']") // breaks
For further clarification, I am testing to see if a radio button is visible. The radio button's DOM elements is as such:
<div class='profile'>
<div class='roleSelector'>
<label for="Admin">
<input type="radio" id="Admin" class="Admin">
</label>
</div>
</div>
As far as I know, there is no such specific case.
Did you try using '.profile input[id='Admin']' ?
Hope that serves your purpose at hand.

Angular Formly - Combining nested forms with repeating sections

So this should be pretty simple, I just want to combine a repeating section within a nested form using Formly.
There are examples for doing each of these individually but I cannot find any examples that combine these functions.
Repeating Section
http://jsbin.com/murule/32/edit?js,output
Nested Forms
http://jsbin.com/zaqeke/22/edit?js,output
I would be very appreciative of anyone who could help!
An example would awesome if possible.
Repeating Section is a complex example of Nested Form
You can see in repeatSection.html repeater ng-repeat="element in model[options.key]"
<div class="repeatsection" ng-repeat="element in model[options.key]" ng-init="fields = copyFields(to.fields)">
<formly-form fields="fields"
model="element"
form="form">
</formly-form>
<div style="margin-bottom:20px;">
<button type="button" class="btn btn-sm btn-danger" ng-click="model[options.key].splice($index, 1)"> Remove </button>
</div>

show input list on Notes web page with options taken from a view

I need to have a combobox on my Lotus Notes Page that I open in WEB...
<input list="myList" name="myList">
<datalist id="myList">
<option value="item 1">
<option value="item 2">
<option value="item 3">
<option value="item 4">
<option value="item 5">
</datalist>
<input type="submit">
as option values (list of items) I want to pull data from some Notes view.
Any ideas?
Thanks
Here is how you can do it (just one way)
<input list="myList" name="myList">
<datalist id="myList">
<computed text>
</datalist>
<input type="submit">
And computed text must have a formula (with #DbColumn) that generate options. This code just an example.
You will need to define view_name, column_number and possible database (if the view is in another database).
_col := #DbColumn(""; ""; "All"; 2);
_options := "<option value=\""+_col+"\">";
#Implode(_options; #NewLine)
Here is a result (my view has only 2 values, 'index' and 'test'):
Also keep in mind that there is a limit (64Kb if I remember correctly) for result of #dbcolumn.
You could also do a more advanced solution, if you want a fancy combobox.
Use a jQuery plugin that support Ajax/JSON for the choices, and then create a Lotusscript agent on the server that return the values.
If you look at this presentation you perhaps get some ideas.
I have used that method in some applications, you get nice features like type-ahead, sorting and much more for free there.

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