I have a view that I am using to display people that have chosen to have a lunch (Mittagessen) or/and a snack (Jause). I want to display a tick (glyphicon-ok) if they have selected either one of the options. Previously I just displayed "Yes" - this was centered and looked fine in the view. As soon as I use the glyphicons the values are no longer centered, they are not in their respective columns (when both are selected) and the separating line is missing (that is not a mistake in the screenshot).
This is the code I am using for the view column values:
<xp:viewColumn columnName="Jause" id="viewColumn6" style="width:8%;text-align:center" displayAs="hidden">
<xp:this.facets>
<xp:viewColumnHeader value="Jause" xp:key="header" id="viewColumnHeader6"></xp:viewColumnHeader>
</xp:this.facets>
<xp:this.styleClass><![CDATA[#{javascript:var idx = viewEntry.getColumnValues().get(6);
if (idx == 1) {
return "glyphicon glyphicon-ok"
}}]]></xp:this.styleClass></xp:viewColumn>
I am assuming that the problem is that I am hiding the value of the column.
Any idea what I am doing wrong or how would this be done correctly using Bootstrap and the extlib? I did take a look at the examples in the ExtLib but couldn't find one in the ToDo.nsf app.
I wouldn't use the styling of the column cell itself but insert some HTML with a xp:text element:
<xp:text escape="false" styleClass="glyphicon glyphicon-ok">
<xp:this.value><![CDATA[#{javascript:"<i class='glyphicon glyphicon-ok'/>"}]]></xp:this.value>
<xp:this.rendered>
return viewEntry.getColumnValues().get(6) == 1
</xp:this.rendered>
</xp:text>
The at the end makes sure the cell is displayed and rendered even when the text (HTML) is not.
Related
I have this code using Quasar/VueJS. What I want to do is update the dropdown text label (keyDropDownLabel) based on the selected <q-item-label>.
So in this example below, I want the newLabelGoesHere part to be Key 1/2/3, depending on which was clicked.
<q-btn-dropdown stretch flat :label="keyDropDownLabel">
<q-list>
<q-item v-for="n in 3" :key="`x.${n}`" clickable v-close-popup tabindex="0">
<q-item-section #click="keyDropDownLabel = 'newLabelGoesHere'">
<q-item-label>Key {{ n }}</q-item-label>
<q-item-label caption>1234567890</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
Anyone help please??
Just modify the q-item-section click method like below:
<q-item-section #click="keyDropDownLabel('Key'+n)">
I wonder, if someone has THE CLUE for me on one of my devel problem (sure you do ;-) ).
I try to use a "Dojo Tab Container" with dynamic Dojo Tab Panes.
<xp:div id="tabs">
<xe:djTabContainer id="djTabContainer1" tabPosition="top"
style="height:250px;width:500px" defaultTabContent="defTab">
<xp:this.facets>
<xe:djTabPane xp:key="defTab" id="myTab" partialEvents="true" closable="true">
<xp:panel>
<xp:label value="#{javascript:getComponent('myTab').getTitle()}"></xp:label>
</xp:panel>
</xe:djTabPane>
</xp:this.facets>
</xe:djTabContainer>
</xp:div>
Then there's a SSJS (button) event to add tabs (actually the action is more complex to calculate title etc., but this should explain):
var cont:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabContainer = getComponent('djTabContainer1');
cont.createTab({id:'tab1', tabUniqueKey:'tab1', tabTitle:'tab1'});
cont.createTab({id:'tab2', tabUniqueKey:'tab2', tabTitle:'tab2'});
cont.createTab({id:'tab3', tabUniqueKey:'tab3', tabTitle:'tab3'});
Now I want to programmatically switch (open) to another tab, or close a tab. It's quite difficult to find useful examples here.
I found out, that I can programmatically switch to another tab via cont.setSelectedTab('2') instead of cont.setSelectedTab('tab2') - as I would expect. For some reason the tabUniqueKey parameter is fully ignored, while the tabTitle parameter isn't. Even worse: it looks like all createTab()-parameters are ignored, except of tabTitle.
Is there an elegant way to get the tab pane component? getComponent('tab2') doesn't work. Neither "id:'tab2'" nor "tabUniqueKey:'tab2'" are taken in account. I can get a tab using getComponent('myTab'), but that's fully useless, if all tabs have the same id.
So, neither does
var cont:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabContainer = getComponent('djTabContainer1');
var tabSel:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabPane = comp.selectTab('tab2');
nor
var tabSel:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabPane = comp.setSelectedTab('tab2');
At least what I'm looking for is something similar to:
cont.closeTab('tab3'); // to close tab3
createTab() returns a UIDojoTabPane pane object and you can use it to select the created tab afterwards:
var cont:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabContainer = getComponent('djTabContainer1');
var paneTab1:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabPane = cont.createTab({id:'tab1', tabUniqueKey:'tab1', tabTitle:'tab1'});
...
cont.setSelectedTab(paneTab1.getTabUniqueKey());
You can use this pane object to close the tab too:
paneTab1.closeTab()
I created on my previous applications a simple FTsearch module, displaying the results inside a viewPanel1.
But, now in other app it gives me a headache. The search code from the view:
var tmpArray = new Array("");
var cTerms = 0;
if (sessionScope.searchFurnizor) {
tmpArray[cTerms++] = "(Field txt_particontractcv_1 = \"*" + sessionScope.searchFurnizor + "*\")";
}
if (sessionScope.searchStare) {
tmpArray[cTerms++] = "(Field txt_stadiucontrcv = \"*" + sessionScope.searchStare + "*\")";
}
qstring = tmpArray.join(" AND ").trim();
sessionScope.queryString = qstring;
return qstring
The txt_particontractcv_1 is a simple inputText and txt_stadiucontrcv is a checkbox:
<xp:checkBoxGroup id="checkBoxGroup1" value="#{Contr.txt_stadiucontrcv}" defaultValue="In derulare">
<xp:selectItem itemLabel="In derulare" itemValue="In derulare"
id="selectItem1">
</xp:selectItem>
<xp:selectItem itemLabel="Finalizat" itemValue="Finalizat"
id="selectItem2">
</xp:selectItem>
</xp:checkBoxGroup>
The button which submits the search is doing a partial refresh to viewPanel1. Still, it returns 0 results even there are documents respecting the filter criteria inside the search.
LATER EDIT: After deleting one by one fields from the FTsearch module, I think I found the issue: the problem is at the fields which are comboboxes ( my case ) in the document content but also inside the FTsearch modulo. The code for the combobox from the FTsearch:
<xp:checkBoxGroup id="checkBoxGroup1" value="#{sessionScope.searchStare}">
<xp:selectItem itemLabel="In derulare" itemValue="In derulare" id="selectItem1">
</xp:selectItem>
<xp:selectItem itemLabel="Finalizat" itemValue="Finalizat" id="selectItem2">
</xp:selectItem>
</xp:checkBoxGroup>
Also, I noticed that the inputField(s) must be inputText, I try with some comoboboxes as input fields, but not working.
Are you refreshing the view in the partialrefresh or a panel outside of the view?
because if you are refreshing the view you probably never update the search query. If so add an xp:panel or xp:div out side of the view and do the partial refresh on that.
Whenever a full text search is not working how you expect it to, my recommendation is always to print out the search string. Then try performing the search in a view in the Notes Client.
If it doesn't work in the view in the client, trying to resolve it in your XPage will not get it working. The Notes Client will tell you why, usually "Query is not understandable" and you can troubleshoot why using the buttons in the search bar in Notes, which tells you which fields are available and what data type the UNK table thinks they are.
If it does work, there's a problem somewhere in your XPage.
As ever, break it down to try to identify where the problem is - in this case the full text search functionality or the implementation of it in XPages.
By default the summary column adds a link to open the underlying document as specified in the dataView's pageName property. I have a use-case where I want to keep the application in the dataView, and not open any "documentXPage".
I know this could be done in a repeat, but there are other parts/functionality of the dataView that work nicely for the application, so ideally I'm just looking to override the default behavior of the summaryColumn.
To override the link behavior I added the summary column as a facet, instead of a property, as in:
<xp:this.facets>
<xp:panel xp:key="summary" id="summaryPanel">
<xp:text escape="false" id="computedField3">
<xp:this.value><![CDATA[#{javascript:
var custName = viewEntry.getColumnValue("Customer");
return "<h4>"+custName+"</h4>"}]]>
</xp:this.value>
</xp:text>
</xp:panel>
<xp:panel xp:key="detail" id="detailsPanel" readonly="true">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[{javascript:
viewEntry.getDocument().getItemValueString("Address") + ", " +
viewEntry.getDocument().getItemValueString("City") + ", " +
viewEntry.getDocument().getItemValueString("State")}]]>
</xp:this.value>
</xp:text>
</xp:panel>
<\xp:this.facets>
How do I code my summary facet to show/hide the details facet when clicked?
It depends on the setting detailsOnClient.
If that is set to true, you should be able to use CSJS to set display to "block" or "none" and you should be able to work out the ID of the element you need to change, using getComponent("dataView1").getRowIndex() (assuming your dataView has the ID dataView1)
This is also the key to doing the same if detailsOnClient is false. The following code will work.
var idex=getComponent("dataView1").getRowIndex();
getComponent("dataView1").toggleDetailVisible(#Text(idex+1));
You're basically getting a handle on the current rowIndex (which starts at 0), adding 1 to get the row to toggle and converting it to text. The DataView control has a method toggleDetailVisible(String) which is used to do the toggle.
As stated by #Mikael in Domino 9 the toggleDetailVisible function does not seem to work. Based on a suggestion from Brad Balassaitis I got it working by getting a handle to the twistie object and clicking it.
var myid = "#{id:link3}";
var parts = myid.split(":");
var outparts = [];
for(var idx=0; idx<parts.length-1; idx++){
outparts[idx] = parts[idx];
}
outparts[outparts.length-1] += "_shimg";
var bid = outparts.join(":");
var btn = document.getElementById(bid);
btn.click();
I think my question is simple for js experts (I am a beginner in js).
In my script I dynamically create a table. In html code I have a button and I want all table cells to be filled with some color when you click on this button.
I have a separate function for filling the table cells but the problem I have encountred is that when I click the button only the last cell of the table gets filled. I assume this issue has something to do with closures as the table cells are being created inside the loop.
Here is the code:
HTML:
<button onclick='show()'>Click</button>
JS:
var obj = new Object;
obj.x = document.createElement('table');
document.body.appendChild(obj.x);
for(i=0;i<10;i++){
obj.y = document.createElement('tr');
obj.x.appendChild(obj.y);
for(j=0;j<10;j++){
obj.z = document.createElement('td');
obj.z.appendChild(document.createTextNode(j));
obj.y.appendChild(obj.z);
}
}
function fill(){
obj.z.style.backgroundColor='red';
}
//-->
Each time the for loop iterates, obj.z is overwritten by a new one, meaning only the last cell will ever be referenced. An easier way to style all the cells in a table is very simply just to change the backgroundColor of the <table> itself.
If you want to do this another way, you'd need to loop through the cell elements individually, and style each one as you go. An easier way to do this is to use jQuery, add a className property to the value (such as theTable in this example) and use the following code:
$('table.theTable td').css('backgroundColor','red');
This would select all the <td> elements in a table with class theTable (it uses CSS selectors), and style their backgroundColor CSS property as red.