I have the same problem as in this post with one additional complication. I need to put two icons in my dataView, and have them horizontal not vertical.
I can get the icons in there but they do not look correct, as I need them to be horizontally aligned:
<xe:this.facets>
<xp:panel xp:key="icon">
<xp:div id="div1">
<xp:this.styleClass>
<![CDATA[#{javascript:return "glyphicon glyphicon-arrow-up pull-left"}]]>
</xp:this.styleClass>
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript://Do stuff here}]]></xp:this.action>
</xp:eventHandler>
</xp:div>
<xp:div id="div2">
<xp:this.styleClass>
<![CDATA[#{javascript:return "glyphicon glyphicon-arrow-down pull-right"}]]>
</xp:this.styleClass>
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript://Do stuff here}]]></xp:this.action>
</xp:eventHandler>
</xp:div>
</xp:panel>
</xe:this.facets>
Since those are divs, they're going to be display: block by default. I'd suggest either adding something like style="display: inline" to the <xp:div/>s or changing them to <xp:panel tagName="i"/>.
Related
Trying to build a reusable menu custom control with a bootstrap theme. I would like an accordion layout, that looks like so:
In a true accordion when a user selects a different heading then the previously selected heading "rolls up". Mine is not rolling up. I suppose this is not a huge problem, but am concerned that if this is not working, then something else will not work either.
I am wondering if it would be better to use the dojo accordion in Xpages in this instance?
Custom Control code (ccMenuFinal)
<?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">
<style>
.list-group{margin-bottom:0}
</style>
<xp:div styleClass="panel-group" id="accordion">
<xp:repeat id="repeat1" var="entry" indexVar="index"
value="#{javascript:compositeData.mnuHeading}">
<xp:div styleClass="panel panel-default">
<xp:div styleClass="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse"
data-parent="#accordion"
href="#{javascript:'#' + entry.MenuHeadingName}">
<xp:text escape="true" id="computedField1"
value="#{javascript:entry.MenuHeadingName}" />
</a>
</h4>
</xp:div>
<div id="#{javascript:entry.MenuHeadingName}"
class="panel-collapse collapse">
<ul class="list-group">
<xp:repeat id="repeat2" var="entry2"
indexVar="index2" value="#{javascript:entry.mnuTitle}">
<xp:link id="lnk"
value="#{javascript://entry2.mnuTrg}">
<xp:this.styleClass><![CDATA[#{javascript:if (entry2.mnuTrg == context.getUrl().getSiteRelativeAddress(context))
{"list-group-item active"}
else
{"list-group-item"}}]]></xp:this.styleClass>
<xp:image id="image3"
style="padding-right:10.0px"
url="#{javascript:entry2.mnuTtlIcn}">
</xp:image>
<xp:this.text><![CDATA[#{javascript:entry2.mnuNme}]]></xp:this.text>
</xp:link>
</xp:repeat>
</ul>
</div>
</xp:div>
</xp:repeat>
</xp:div>
</xp:view>
Xpage code:
<?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">
<div class="container">
<xc:ccMenuFinal>
<xc:this.mnuHeading>
<xc:mnuHeading MenuHeadingName="PCs">
<xc:this.mnuTitle>
<xc:mnuTitle mnuTrg="/xpView01.xsp"
mnuNme="Inventory"
mnuTtlIcn="/inventory16X16blue.png"
mnuTtlIcnAct="/inventory16X16.png">
</xc:mnuTitle>
<xc:mnuTitle mnuNme="Being Built"
mnuTrg="/xpView02.xsp"
mnuTtlIcn="/build16X16blue.png"
mnuTtlIcnAct="/build16X16.png">
</xc:mnuTitle>
</xc:this.mnuTitle>
</xc:mnuHeading>
<xc:mnuHeading MenuHeadingName="Tasks">
<xc:this.mnuTitle>
<xc:mnuTitle mnuNme="Build Tasks"
mnuTrg="/xpViewTasksBuild.xsp">
</xc:mnuTitle>
</xc:this.mnuTitle>
</xc:mnuHeading>
</xc:this.mnuHeading>
</xc:ccMenuFinal>
</div>
</xp:view>
There are 2 issues with the code you posted.
The first is your <xp:div styleClass="panel-group" id="accordion">
Because it's an XP tag, the id accordion gets converted into a programmatic id that consists of prefixes...e.g. view:0:whatever:accordion. This is breaking your tabs and not allowing them to link to the panel group. Change this to <div class="panel-group" id="accordion">
The second is the repeat control that is used to generate the tabs. As a default, a repeat control creates its own divs. This is creating alien HTML tags inside your accordion HTML. There is a property for the repeat control called disableOutputTag. Set this to true and it will remove the alien HTML.
I am using Bootstrap tabs in my XPage application as follows:
<div class="bs-component">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
PENDING REQUESTS
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">
ARCHIVES
</a>
</li>
</ul>
</div>
Upon clicking a given tab, I'd like to set a sessionScope variable. I tried substituting the li with an xp:panel (tagName="li") and an eventHandler attached but could not get it to write to sessionScope. I'm using Mark Leusink's debugger to check scope variables.
Would appreciate suggestions.
Thanks,
Dan
I think the best way it to add some JQuery code to add an onClick event, which triggers SSJS code. How to do this, see http://www.xpagetips.com/2011/11/running-ssjs-from-csjs-sometimes-its.html
This code should work. You must set id attribute for panel
<xp:panel tagName="li" id="XXX">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:sessionScope.XXX = "";}]]></xp:this.action>
</xp:eventHandler>
</xp:panel>
For attach to ssjs event XSP use this code(example):
XSP.attachEvent("view:_id1:_id3:_id12", "view:_id1:_id3:image2", "onclick", null, true, 2);
Where second parameter is target id attribute
In Lotus Notes Designer 8.5.2, When creating a new xpage with a dijit dialog, the css doesn't show up.
How would I fix this? Here's the code:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
</xp:this.resources>
<xp:div dojoType="dijit.Dialog" id="dialog1" style="display: none"
title="Test">
<xp:panel>Hello!</xp:panel>
</xp:div>
<xp:button value="Show Dialog" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script>
<xp:executeClientScript>
<xp:this.script>
<![CDATA[dijit.byId("#{id:dialog1}").show();]]>
</xp:this.script>
</xp:executeClientScript>
</xp:this.script>
</xp:eventHandler>
</xp:button>
</xp:view>
It turns out, that the dojo theme is disabled by default when one creates a blank xpage:
Once we set dojoTheme to true, then the page renders correctly:
I want to put links in the left navigation of my application that open an xPage and select a specific accordion entry. Not sure how to do this
Any thoughts?
I am assuming here that you want to do this programmatically. Look into this answer- https://stackoverflow.com/a/1190455/1047998 - which describes the usage of selectChild which is used to select specific accordion pane. You can also go through the Dojo API documentation of dijit.layout.AccordionContainer - http://dojotoolkit.org/api/1.6/dijit/layout/AccordionContainer - where you can refer the documentation for selectChild.
Update:
So let's say if you define your accordion container like this:
<xp:div dojoType="dijit.layout.AccordionContainer" id="accordionContainer">
<xp:div dojoType="dijit.layout.ContentPane" id="pane1" title="Pane 1">
Content 1
</xp:div>
<xp:div dojoType="dijit.layout.ContentPane" title="Pane 2" id="pane2">
Content 2
</xp:div>
<xp:div dojoType="dijit.layout.ContentPane" title="Pane 3" id="pane3">
Content 3
</xp:div>
<xp:div dojoType="dijit.layout.ContentPane" title="Pane 4" id="pane4">
Content 4
</xp:div>
</xp:div>
So to select pane3 JavaScript code would be like:
var ac = dijit.byId("#{id:accordionContainer}");
ac.selectChild(dijit.byId("#{id:pane3}"));
I want to have height set to AUTO for all my content panes in my dojo accordion. But it is currently taking the def height or the height i set for the accordion.
does anyone know how to set the height of a content pane to dynamic or auto inside the dijit.layout.accordionpane.
Here is my sample code.
<div dojoType="dijit.layout.AccordionContainer" id="#getId("Accordion")" duration="80" style="width: 760px; height:auto;">
<div dojoType="dijit.layout.ContentPane" id="#getId("InfoPane")" selected="true"
title="Basic Information">
</div>
<div dojoType="dijit.layout.ContentPane" id="#getId("ContactPane")" title="Contact
Information">
</div>
</div>
Please advice.
Thanks,
Vivek
I used the doLayout parameter of Accordion.
With this all the ContentPane's height will be set to their content instead of the Accordion height.