SlideShare a Scribd company logo
XPages Extension Library:
                 Create an app in 1 hour (almost)




                                               PHL-Consult.dk
                                               info@PHL-Consult.dk

                                               Per Henrik Lausten
April 19, 2012                                 per.lausten.dk/blog/
                                               twitter.com/perlausten
Prerequisites
Lotus Domino 8.5.3
XPages Extension Library from OpenNTF or Upgrade Pack 1
Purpose
From classic:




To modern:




In 1 hour (almost)
Application Layout
OneUI application layout
  <xe:applicationLayout id="applicationLayout1">
       <xe:this.configuration>
                        <xe:oneuiApplication>
  </xe:oneuiApplication>
  </xe:this.configuration>
  </xe:applicationLayout>


Dropdown menu
  <xe:basicContainerNode label="Dropdown menu">
       <xe:this.children>

                  <xe:basicLeafNode label="Choice 1"></xe:basicLeafNode>

            <xe:basicLeafNode label="Choice 2"></xe:basicLeafNode>

             <xe:basicLeafNode label="Choice 3"></xe:basicLeafNode>
       </xe:this.children>
  </xe:basicContainerNode>


NavigationPath custom property and the selection property
Tabs
  <xe:this.titleBarTabs>
Navigator
Menu
  <xe:navigator id="navigator1">
       <xe:this.treeNodes>
             <xe:pageTreeNode label="Index" page="/index.xsp" selection="/Tab1/Index"></xe:pageTreeNode>
             <xe:pageTreeNode label="Page 2" page="/page2.xsp" selection="/Tab1/Page2"></xe:pageTreeNode>
       </xe:this.treeNodes>
  </xe:navigator>


View list
  <xe:dominoViewListTreeNode filter="All.*" submitValue="#{viewEntry.name}" var="viewEntry">
       <xe:this.databaseName><![CDATA[#{javascript:database.getServer() + "!!" +
  "notesnet//forum.nsf"}]]></xe:this.databaseName>
       <xe:this.selected><![CDATA[#{javascript:viewEntry.getName() ==
  sessionScope.clickedView}]]></xe:this.selected>
  </xe:dominoViewListTreeNode>

  <xp:eventHandler event="onItemClick" submit="true" refreshMode="complete">
       <xp:this.action>
         <![CDATA[#{javascript:sessionScope.clickedView = context.getSubmittedValue();
       context.redirectToPage("forumview.xsp");}]]>
       </xp:this.action>
  </xp:eventHandler>
Dynamic View Panel
Dynamic views
   <xe:dynamicViewPanel id="dynamicViewPanel1" pageName="/forumpost.xsp" var="viewEntry">
        <xe:this.data>

        <xp:dominoView var="view1" viewName="#{sessionScope.clickedView}">
        <xe:this.databaseName><![CDATA[#{javascript:database.getServer() + "!!" +
   "notesnet//forum.nsf"}]]></xe:this.databaseName>
        </xp:dominoView>
        </xe:this.data>

        <xp:eventHandler event="onColumnClick" submit="true" refreshMode="complete">
              <xp:this.action><![CDATA[#{javascript:var url="/forumpost.xsp?
   action=openDocument&documentId="+viewEntry.getNoteID();

context.redirectToPage(url);}]]></xp:this.action>
               </xp:eventHandler>
         </xe:dynamicViewPanel>


Customizer Bean
Forms
Form Table, Form Layout Row og Form Layout Column
 <xe:formTable id="formTable1">

      <xe:formRow id="formRow1" label="Subject">

           <xp:inputText id="inputText1" value="#{document1.Subject}"></xp:inputText>
      </xe:formRow>

      <xe:formRow id="formRow2" label="Body">

            <xp:inputRichText id="inputRichText1" value="#{document1.Body}"></xp:inputRichText>
      </xe:formRow>
 </xe:formTable>


Name picker
 <xe:djextNameTextBox id="From" value="#{document1.From}"></xe:djextNameTextBox>

      <xe:namePicker id="namePickerFrom" for="From">
           <xe:this.dataProvider>

      <xe:dominoNABNamePicker addressBookSel="all-public" nameList="people"></xe:dominoNABNamePicker>
      </xe:this.dataProvider>
 </xe:namePicker>
Forms
Value picker
  <xp:inputText id="Categories" value="#{document1.Categories}">

       <xp:typeAhead mode="partial" minChars="1" preventFiltering="true">
       <xp:this.valueList><
  [CDATA[#{javascript:getComponent("valuePickerCategories").getTypeAheadValue(this)}]]>
       </xp:this.valueList>
       </xp:typeAhead>
  </xp:inputText>

  <xe:valuePicker id="valuePickerCategories" for="Categories">
       <xe:this.dataProvider>
             <xe:simpleValuePicker>
                  <xe:this.valueList><![CDATA[#{javascript:DbColumnArray("", "Notesnetforum.nsf",
  "cache", "unique", "sort", "AllByCategory", 2)}]]></xe:this.valueList>
             </xe:simpleValuePicker>
       </xe:this.dataProvider>
  </xe:valuePicker>
Styling
CSS
Demo
http://notesnet.dk/databaser/perlausten/extlibdemo.nsf/

More Related Content

What's hot (18)

DOCX
Doctype html public
ecuapool
 
DOC
Java script frame history
H K
 
PPTX
Xml 2
pavishkumarsingh
 
PPTX
Form Handling using PHP
Nisa Soomro
 
PDF
PHPTAL with CakePHP
Takashi Nojima
 
PDF
Html5 appunti.0
orestJump
 
PPTX
Java script form validation
AbhishekMondal42
 
PPT
Lecture7 form processing by okello erick
okelloerick
 
PDF
Creating simple php contact form
Daniel Downs
 
PDF
Making web forms using php
krishnapriya Tadepalli
 
DOCX
Practical file(XHTML)web designing
ArtiSolanki5
 
PPTX
Html basics
wakeel132
 
PPTX
Isomorphic react in real life
Jonas Ohlsson Aden
 
PDF
REST and AJAX Reconciled
Lars Trieloff
 
PDF
Web app development_html_02
Hassen Poreya
 
PPT
03 namespace
Baskarkncet
 
PDF
Introhtml 2
bluejayjunior
 
Doctype html public
ecuapool
 
Java script frame history
H K
 
Form Handling using PHP
Nisa Soomro
 
PHPTAL with CakePHP
Takashi Nojima
 
Html5 appunti.0
orestJump
 
Java script form validation
AbhishekMondal42
 
Lecture7 form processing by okello erick
okelloerick
 
Creating simple php contact form
Daniel Downs
 
Making web forms using php
krishnapriya Tadepalli
 
Practical file(XHTML)web designing
ArtiSolanki5
 
Html basics
wakeel132
 
Isomorphic react in real life
Jonas Ohlsson Aden
 
REST and AJAX Reconciled
Lars Trieloff
 
Web app development_html_02
Hassen Poreya
 
03 namespace
Baskarkncet
 
Introhtml 2
bluejayjunior
 

Viewers also liked (8)

PPTX
Bootstrap4XPages - an introduction
Per Henrik Lausten
 
PPTX
An introduction to IBM BlueMix
Per Henrik Lausten
 
PDF
Connect 2014 - JMP102: Creating a Great XPages User Interface
Howard Greenberg
 
PDF
Bootstrap and XPages (DanNotes 2013)
Mark Leusink
 
PDF
XPages Application Layout Control - TLCC March, 2014 Webinar
Howard Greenberg
 
PDF
Show110 | Using the XPages Extension Library for the Real World
pdhannan
 
PDF
Bootstrap4XPages
Teamstudio
 
PDF
Building Responsive Applications Using XPages
Teamstudio
 
Bootstrap4XPages - an introduction
Per Henrik Lausten
 
An introduction to IBM BlueMix
Per Henrik Lausten
 
Connect 2014 - JMP102: Creating a Great XPages User Interface
Howard Greenberg
 
Bootstrap and XPages (DanNotes 2013)
Mark Leusink
 
XPages Application Layout Control - TLCC March, 2014 Webinar
Howard Greenberg
 
Show110 | Using the XPages Extension Library for the Real World
pdhannan
 
Bootstrap4XPages
Teamstudio
 
Building Responsive Applications Using XPages
Teamstudio
 
Ad

Similar to XPages Extension Library - Create an app in 1 hour (almost) (20)

ODP
IBM Lotus Notes Domino XPages and XPages for Mobile
Chris Toohey
 
PDF
##dd12 sviluppo mobile XPages
Dominopoint - Italian Lotus User Group
 
PDF
Ad107 - Enhance Your Existing Applications with XPages
ddrschiw
 
PDF
Connect 2014 - BP202: Rapid XPages Development Using the Application Layout C...
Howard Greenberg
 
PDF
Application Layout Control
Teamstudio
 
PDF
Ask the XPages Experts
Teamstudio
 
PPTX
Take Your XPages Development to the Next Level
balassaitis
 
PDF
Connect 2014 SHOW102: XPages Still No Experience Necessary
panagenda
 
ODP
Approaches to Enhancing the User Experience
Michael McGarel
 
PDF
SHOW102 XPages: Still No Experience Necessary IBM Connect 2014
Kathy Brown
 
ODP
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
Chris Toohey
 
PPTX
Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today!
Howard Greenberg
 
PDF
XPages Blast - Lotusphere 2013
Tim Clark
 
ODP
Lab: Developing with the extension library
WorkFlowStudios
 
PDF
Move Your XPages Applications to the Fast Lane
Teamstudio
 
PDF
XPages Performance Master Class - Survive in the fast lane on the Autobahn (E...
BCC - Solutions for IBM Collaboration Software
 
ODP
Intro to XPages for Administrators (DanNotes, November 28, 2012)
Per Henrik Lausten
 
ODP
My view on XPages
Per Henrik Lausten
 
PDF
XPages101 - Building an XPages app - Lotusphere 2011
Tim Clark
 
PDF
Wireless Wednesdays: Part 2
Teamstudio
 
IBM Lotus Notes Domino XPages and XPages for Mobile
Chris Toohey
 
##dd12 sviluppo mobile XPages
Dominopoint - Italian Lotus User Group
 
Ad107 - Enhance Your Existing Applications with XPages
ddrschiw
 
Connect 2014 - BP202: Rapid XPages Development Using the Application Layout C...
Howard Greenberg
 
Application Layout Control
Teamstudio
 
Ask the XPages Experts
Teamstudio
 
Take Your XPages Development to the Next Level
balassaitis
 
Connect 2014 SHOW102: XPages Still No Experience Necessary
panagenda
 
Approaches to Enhancing the User Experience
Michael McGarel
 
SHOW102 XPages: Still No Experience Necessary IBM Connect 2014
Kathy Brown
 
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
Chris Toohey
 
Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today!
Howard Greenberg
 
XPages Blast - Lotusphere 2013
Tim Clark
 
Lab: Developing with the extension library
WorkFlowStudios
 
Move Your XPages Applications to the Fast Lane
Teamstudio
 
XPages Performance Master Class - Survive in the fast lane on the Autobahn (E...
BCC - Solutions for IBM Collaboration Software
 
Intro to XPages for Administrators (DanNotes, November 28, 2012)
Per Henrik Lausten
 
My view on XPages
Per Henrik Lausten
 
XPages101 - Building an XPages app - Lotusphere 2011
Tim Clark
 
Wireless Wednesdays: Part 2
Teamstudio
 
Ad

Recently uploaded (20)

PDF
Quantum Threats Are Closer Than You Think – Act Now to Stay Secure
WSO2
 
PDF
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
PDF
Enhancing Environmental Monitoring with Real-Time Data Integration: Leveragin...
Safe Software
 
PPTX
Securing Model Context Protocol with Keycloak: AuthN/AuthZ for MCP Servers
Hitachi, Ltd. OSS Solution Center.
 
PDF
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
PDF
Next Generation AI: Anticipatory Intelligence, Forecasting Inflection Points ...
dleka294658677
 
PDF
Optimizing the trajectory of a wheel loader working in short loading cycles
Reno Filla
 
PDF
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
PPTX
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
PDF
Deploy Faster, Run Smarter: Learn Containers with QNAP
QNAP Marketing
 
PPTX
Wondershare Filmora Crack Free Download 2025
josanj305
 
PDF
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
PDF
Draugnet: Anonymous Threat Reporting for a World on Fire
treyka
 
PDF
Bitkom eIDAS Summit | European Business Wallet: Use Cases, Macroeconomics, an...
Carsten Stoecker
 
PPTX
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
PPTX
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
PPTX
CapCut Pro PC Crack Latest Version Free Free
josanj305
 
PDF
Java 25 and Beyond - A Roadmap of Innovations
Ana-Maria Mihalceanu
 
PDF
Understanding The True Cost of DynamoDB Webinar
ScyllaDB
 
Quantum Threats Are Closer Than You Think – Act Now to Stay Secure
WSO2
 
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
Enhancing Environmental Monitoring with Real-Time Data Integration: Leveragin...
Safe Software
 
Securing Model Context Protocol with Keycloak: AuthN/AuthZ for MCP Servers
Hitachi, Ltd. OSS Solution Center.
 
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
Next Generation AI: Anticipatory Intelligence, Forecasting Inflection Points ...
dleka294658677
 
Optimizing the trajectory of a wheel loader working in short loading cycles
Reno Filla
 
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
Deploy Faster, Run Smarter: Learn Containers with QNAP
QNAP Marketing
 
Wondershare Filmora Crack Free Download 2025
josanj305
 
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
Draugnet: Anonymous Threat Reporting for a World on Fire
treyka
 
Bitkom eIDAS Summit | European Business Wallet: Use Cases, Macroeconomics, an...
Carsten Stoecker
 
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
CapCut Pro PC Crack Latest Version Free Free
josanj305
 
Java 25 and Beyond - A Roadmap of Innovations
Ana-Maria Mihalceanu
 
Understanding The True Cost of DynamoDB Webinar
ScyllaDB
 

XPages Extension Library - Create an app in 1 hour (almost)

  • 1. XPages Extension Library: Create an app in 1 hour (almost) PHL-Consult.dk [email protected] Per Henrik Lausten April 19, 2012 per.lausten.dk/blog/ twitter.com/perlausten
  • 2. Prerequisites Lotus Domino 8.5.3 XPages Extension Library from OpenNTF or Upgrade Pack 1
  • 4. Application Layout OneUI application layout <xe:applicationLayout id="applicationLayout1"> <xe:this.configuration> <xe:oneuiApplication> </xe:oneuiApplication> </xe:this.configuration> </xe:applicationLayout> Dropdown menu <xe:basicContainerNode label="Dropdown menu"> <xe:this.children> <xe:basicLeafNode label="Choice 1"></xe:basicLeafNode> <xe:basicLeafNode label="Choice 2"></xe:basicLeafNode> <xe:basicLeafNode label="Choice 3"></xe:basicLeafNode> </xe:this.children> </xe:basicContainerNode> NavigationPath custom property and the selection property Tabs <xe:this.titleBarTabs>
  • 5. Navigator Menu <xe:navigator id="navigator1"> <xe:this.treeNodes> <xe:pageTreeNode label="Index" page="/index.xsp" selection="/Tab1/Index"></xe:pageTreeNode> <xe:pageTreeNode label="Page 2" page="/page2.xsp" selection="/Tab1/Page2"></xe:pageTreeNode> </xe:this.treeNodes> </xe:navigator> View list <xe:dominoViewListTreeNode filter="All.*" submitValue="#{viewEntry.name}" var="viewEntry"> <xe:this.databaseName><![CDATA[#{javascript:database.getServer() + "!!" + "notesnet//forum.nsf"}]]></xe:this.databaseName> <xe:this.selected><![CDATA[#{javascript:viewEntry.getName() == sessionScope.clickedView}]]></xe:this.selected> </xe:dominoViewListTreeNode> <xp:eventHandler event="onItemClick" submit="true" refreshMode="complete"> <xp:this.action> <![CDATA[#{javascript:sessionScope.clickedView = context.getSubmittedValue(); context.redirectToPage("forumview.xsp");}]]> </xp:this.action> </xp:eventHandler>
  • 6. Dynamic View Panel Dynamic views <xe:dynamicViewPanel id="dynamicViewPanel1" pageName="/forumpost.xsp" var="viewEntry"> <xe:this.data> <xp:dominoView var="view1" viewName="#{sessionScope.clickedView}"> <xe:this.databaseName><![CDATA[#{javascript:database.getServer() + "!!" + "notesnet//forum.nsf"}]]></xe:this.databaseName> </xp:dominoView> </xe:this.data> <xp:eventHandler event="onColumnClick" submit="true" refreshMode="complete"> <xp:this.action><![CDATA[#{javascript:var url="/forumpost.xsp? action=openDocument&documentId="+viewEntry.getNoteID(); context.redirectToPage(url);}]]></xp:this.action> </xp:eventHandler> </xe:dynamicViewPanel> Customizer Bean
  • 7. Forms Form Table, Form Layout Row og Form Layout Column <xe:formTable id="formTable1"> <xe:formRow id="formRow1" label="Subject"> <xp:inputText id="inputText1" value="#{document1.Subject}"></xp:inputText> </xe:formRow> <xe:formRow id="formRow2" label="Body"> <xp:inputRichText id="inputRichText1" value="#{document1.Body}"></xp:inputRichText> </xe:formRow> </xe:formTable> Name picker <xe:djextNameTextBox id="From" value="#{document1.From}"></xe:djextNameTextBox> <xe:namePicker id="namePickerFrom" for="From"> <xe:this.dataProvider> <xe:dominoNABNamePicker addressBookSel="all-public" nameList="people"></xe:dominoNABNamePicker> </xe:this.dataProvider> </xe:namePicker>
  • 8. Forms Value picker <xp:inputText id="Categories" value="#{document1.Categories}"> <xp:typeAhead mode="partial" minChars="1" preventFiltering="true"> <xp:this.valueList>< [CDATA[#{javascript:getComponent("valuePickerCategories").getTypeAheadValue(this)}]]> </xp:this.valueList> </xp:typeAhead> </xp:inputText> <xe:valuePicker id="valuePickerCategories" for="Categories"> <xe:this.dataProvider> <xe:simpleValuePicker> <xe:this.valueList><![CDATA[#{javascript:DbColumnArray("", "Notesnetforum.nsf", "cache", "unique", "sort", "AllByCategory", 2)}]]></xe:this.valueList> </xe:simpleValuePicker> </xe:this.dataProvider> </xe:valuePicker>