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:
Related
I am trying to extend a qweb template view. But it's not working.
Here is my code.
my_module/static/src/xml/website.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-extend="website.homepage_editor_welcome_message" >
<t t-jquery=".lead" t-operation="replace">
<p class="lead second_head">Let's start designing.</p>
</t>
</t>
</templates>
Here is the original code from the website module.
<div t-name="website.homepage_editor_welcome_message" class="container text-center o_homepage_editor_welcome_message">
<h2 class="mt0">Welcome to your <b>Homepage</b>!</h2>
<p class="lead">Let's start designing.</p>
<div class="o_tooltip_container">Follow all the <div class="o_tooltip bottom"/> signs to get your website ready in no time.</div>
</div>
And add the XML file in __manifest__.py like below.
'qweb': ['static/src/xml/website.xml'],
But no change in website.
How can i do it?
The only way I was able to find to be able to inherit a Qweb template declared with t-name is to redefine it in your custom module, change the code directly. You will be overriding the existing one.
I'm trying to build a basic toolbar with Polymer 2.0 RC using app-toolbars and paper-tabs. I created the header according to the documentation and added paper-tabs for the bottom app-toolbar, but they're not visible.
I imported all elements correctly
I tried to set the height of the second app-toolbar to 100%
I tried to just use paper-tabs in the main document, but they don't show either
It does not work in either chrome or FF
Any help is appreciated! Thanks!
my code:
<app-drawer-layout fullbleed>
<!-- app-headers -->
<app-header-layout has-scrolling-region>
<app-header slot="header" fixed shadow condenses effects="waterfall">
<app-toolbar id="topbar">
<paper-icon-button icon="app-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>WASC Hosting</div>
<paper-icon-button icon="app-icons:code"></paper-icon-button>
<paper-icon-button icon="app-icons:search"></paper-icon-button>
<paper-progress value="10" indeterminate bottom-item></paper-progress>
</app-toolbar>
<app-toolbar>
<paper-tabs selected="0">
<paper-tab>Food</paper-tab>
<paper-tab>Food</paper-tab>
<paper-tab>Food</paper-tab>
</paper-tabs>
</app-toolbar>
</app-header>
<!-- view contents -->
<iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view-404" role="main">
<wasc-view-main name="main" class="content"></wasc-view-main>
<wasc-view-console name="console" class="content"></wasc-view-console>
<wasc-view-products name="products" class="content"></wasc-view-products>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
Look at Polymer 2.0 installation Documentation.
Have you installed paper-tabs with bower correctly?
bower install --save PolymerElements/paper-tabs#2.0-preview
Look at my bower.json:
"dependencies": {
"app-layout": "PolymerElements/app-layout#2.0-preview",
"app-route": "PolymerElements/app-route#2.0-preview",
"iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
"iron-icon": "PolymerElements/iron-icon#2.0-preview",
"iron-media-query": "PolymerElements/iron-media-query#2.0-preview",
"iron-pages": "PolymerElements/iron-pages#2.0-preview",
"iron-selector": "PolymerElements/iron-selector#2.0-preview",
"paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
"paper-tabs": "PolymerElements/paper-tabs#2.0-preview"
"polymer": "Polymer/polymer#^2.0.0-rc.1",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.4"
},
"resolutions": {
"polymer": "^2.0.0-rc.1"
},
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 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"/>.
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}"));