Friday, 23 June 2017

Using Selectize for List Boxes and Combo Boxes in XPages

Selectize is the hybrid of a textbox and <select> box. It's jQuery based and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc. It clocks in at around 7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API. Selectize is a lot like Chosen, Select2, and Tags Input but with a few advantages.
In order to use Selectize, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Selectize.
Below a basic example how Selectize can be used in an XPages application. In the example below I also included Sifter, a library for textually searching arrays and hashes of objects by property (or multiple properties) designed specifically for autocomplete and Microplugin, a lightweight plugin / dependency system for libraries.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example the Folders selectize, sifter and microplugin have been added in the WebContent Folder.


Next the JavaScript and CSS files, sifter/sifter.js, microplugin.js, selectize.js and selectize.bootstrap3.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="sifter/sifter.js"></script>
<script type="text/javascript" src="microplugin/microplugin.js"></script>
<link rel="stylesheet" href="selectize/css/selectize.bootstrap3.css" />
<script type="text/javascript" src="selectize/js/selectize.js"></script>

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. In this example I use a few standard options.

</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).selectize({
create: true,
sortField: 'text',
placeholder: "Select a product",
plugins: ['remove_button']
});
})
]]></xp:this.value>
</xp:scriptBlock>

AMD Loader Fix
Finally, all JavaScript files needs to be adjusted. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. The source code of the library can be adjusted in a very simple way with just a slight modification.

1. Go to the WebContent Folder and select the specific JavaScript file
2. Select Open With - Client/Server JS Editor



3. Removed define.amd and replace it with false


4. Save the JavaScript file bootstrap-dialog.js

Note: There are other solutions for the AMD Fix. For more information about thes solution see my blog post Bootstrap Plugins in XPages Part VI - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2).

Final Result
The final result is a responsive Select Box with some additional options in the initial setup.


Code XPage
<?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">
<script type="text/javascript" src="sifter/sifter.js"></script>
<script type="text/javascript" src="microplugin/microplugin.js"></script>
<link rel="stylesheet" href="selectize/css/selectize.bootstrap3.css" />
<script type="text/javascript" src="selectize/js/selectize.js"></script>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).selectize({
create: true,
sortField: 'text',
placeholder: "Select a key"
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).selectize({
create: true,
sortField: 'text',
placeholder: "Select a product",
plugins: ['remove_button']
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:comboBox id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array(""); 
var res = @DbColumn("C1257C43:002CD36F", "($ChooseDepartment)", 1)
var list = arr.concat(res);
return list;
}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
<xp:br></xp:br>
<xp:listBox id="listBox1" multiple="true">
<xp:selectItem itemLabel=""
itemValue=""></xp:selectItem>
<xp:selectItem itemLabel="Notes Client"
itemValue="Notes Client"></xp:selectItem>
<xp:selectItem itemLabel="Notes Designer"
itemValue="Notes Designer"></xp:selectItem>
<xp:selectItem itemLabel="Notes Administrator"
itemValue="Notes Administrator"></xp:selectItem>
</xp:listBox>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: Documentation Selectize

Thursday, 22 June 2017

Using SweetModal in XPages: Alert, Confirm, Prompt and Modal- Only Better!

One of the requirements for a new XPages Project constisted of a lightweight and powerful Confirm, Alert, Prompt and Modal functionality. In my search I came across SweetModal, a lightweight and powerful jQuey Plugin.
In order to use SweetModal, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: SweetModal. Below a basic example how SweetModal can be used in an XPages application.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder flatpickr has been added in the WebContent Folder.
Next the JavaScript and CSS files, jquery.sweet-modal.js and jquery.sweet-modal.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<link rel="stylesheet" href="sweetmodal/dev/jquery.sweet-modal.css" />
<script type="text/javascript" src="sweetmodal/dev/jquery.sweet-modal.js"></script>

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){$.sweetModal({
content: 'Dialog Message including Theme Dark and a Button.',
title: 'Dialog Message',
icon: $.sweetModal.ICON_ERROR,
theme: $.sweetModal.THEME_DARK,
buttons: [
{
label: 'Close Dialog',
classes: 'redB'
}
]
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Another possibility for example is to add the script in the OnClick Event of a Button (CSJS). For more information see the XPage Example Code below.

Final Result
The final result is a responsive Alert, Confirm, Prompt and Modal functionality with some additional options in the initial setup.


Code XPage
<?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">
<link rel="stylesheet" href="sweetmodal/dev/jquery.sweet-modal.css" />
<script type="text/javascript" src="sweetmodal/dev/jquery.sweet-modal.js"></script>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){$.sweetModal({
content: 'Dialog Message including Theme Dark and a Button.',
title: 'Dialog Message',
icon: $.sweetModal.ICON_ERROR,
theme: $.sweetModal.THEME_DARK,
buttons: [
{
label: 'Close Dialog',
classes: 'redB'
}
]
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button id="button1" value="Sweet Modal">
</xp:button>
<xp:br></xp:br>
<xp:button id="button2" value="Dialog Tabs">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$.sweetModal({
theme: $.sweetModal.THEME_DARK,
title: {
tab1: {
label: 'Message'
},
tab2: {
label: 'Detailed Info'
}
},
content: {
tab1: 'Sweet Modal Dialog',
tab2: 'TABBED WITH BUTTONS'
},
buttons: {
someOtherAction: {
label: 'Action 2',
classes: 'orangeB',
action: function() {
return $.sweetModal('You clicked Action 2!');
}
},
someAction: {
label: 'Action 1',
classes: '',
action: function() {
return $.sweetModal('You clicked Action 1!');
}
}
}
});]]></xp:this.script>
</xp:eventHandler></xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: Documentation SweetModal

Wednesday, 21 June 2017

Using flatpickr a Lightweight and Powerful Datetime Picker in XPages

One of the requirements for a new XPages Project constisted of a lightweight and powerful Datetime Picker functionality. In my search I came across flatpickr, a lightweight and powerful Datetime Picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any environment.
In order to use flatpickr, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: flatpickr. Below a basic example how flatpickr can be used in an XPages application.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder flatpickr has been added in the WebContent Folder.
Next the JavaScript and CSS files, flatpickr.js and flatpickr.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<link rel="stylesheet" href="flatpickr/flatpickr.css" />
<script type="text/javascript" src="flatpickr/flatpickr.js"></script>

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).flatpickr({
dateFormat: 'd-m-Y',
placeholder: 'Select Date..',
locale: {
firstDayOfWeek: 1 // start week on Monday
}
});
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive DateTime Picker functionality with some additional options in the initial setup.



Code XPage
 <?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">
<link rel="stylesheet" href="flatpickr/flatpickr.css" />
<script type="text/javascript" src="flatpickr/flatpickr.js"></script>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).flatpickr({
dateFormat: 'd-m-Y',
placeholder: 'Select Date..',
locale: {
firstDayOfWeek: 1 // start week on Monday
}
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-md-7"><h3>Flatpickr</h3>
<h5>flatpickr is a lightweight and powerful datetime picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any environment.</h5></div>
<div class="col-md-7">
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="placeholder" value="Select Date..."></xp:attr>
</xp:this.attrs>
</xp:inputText>    
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: flatpickr introduction

Tuesday, 20 June 2017

Replay IBM Notes Domino XPages Webinar - SmartNSF - 100% Smart - and in Color!

On June 13 th a very interesting webinar was organized by T.L.C.C and Team Studio, SmartNSF - 100% Smart - and in Color! by Christian Guedeman and Martin Jinoch. For those who missed this webinar below the content, slides and video.

Content
SmartNSF is one piece of the IBM Domino application modernization puzzle! Learn how you can turn a simple Domino database (NSF) to a smart microservice within minutes. If you are new to the world of REST APIs, Microservices, OpenApi Specification and YAML don't worry! Christian and Martin will provide you an introduction to the modern paradigm of the microservice world. We will explore how your "old" skills on @Formulas, Agents and LotusScript fit into the new world of SmartNSF. SmartNSF also brings great value to XPages, Java and SSJS Gurus. And, last but not least, learn how all this fits into IBM's REST API Strategy and get inspired with what can be done with SmartNSF in your business. Will there be a demo? For sure!


Tuesday, 6 June 2017

ApplicationInsights Quick Start Series

Starting April 11, 2017, customers who are current on IBM Software Subscription and Support (S&S) for Domino Enterprise Server, Utility Server, or Dual Entitlement with Applications will be entitled to panagenda ApplicationInsights at no cost. See this blog post for important details pertaining to this offering.



ApplicationInsights is an offering from panagenda that allows customers to get a detailed analysis of their application landscape in IBM Domino. ApplicationInsights provides key analysis to help Domino customers understand usage and complexity of their applications to allow them to better determine the correct strategy to move forward with regarding those applications.
Usage Analysis: ApplicationInsights provides you with clear insights into the use of your application landscape. Find out how and whether an application is used: Is it accessed as read or write, and how often do specific departments and sites use certain application?
Code Assessment: The perfect overview of the complexity of the entire application environment for you or your developers. How many lines of code are relevant, which programming language is strongly represented, and how do complexity and dependencies affect your application strategy?
Application Strategies: ApplicationInsights is your key to strategy optimization. By linking usage and application design information, you have the perfect foundation for your project: Minimize operating costs and calculate risks and expenses into minute detail.
Below the Quick Start Series that I came accross last weekend for ApplicationInsights.

ApplicationInsights Quick Start Series 1 - Getting Started



ApplicationInsights Quick Start Series 2 - Usage Analytics



ApplicationInsights Quick Start Series 3 - Design Insights

Monday, 5 June 2017

XPages Webinar: SmartNSF - 100% Smart - and in Color!

On Tuesday, June 13th (my Birthday) a very interesting webinar will be organized by T.L.C.C and Team Studio, SmartNSF - 100% Smart - and in color! by Christian Guedeman and Martin Jinoch. The registration for this webinar is available on the T.L.C.C website.


Content Webinar
SmartNSF is one piece of the IBM Domino application modernization puzzle! Learn how you can turn a simple Domino database (NSF) to a smart microservice within minutes. If you are new to the world of REST APIs, Microservices, OpenApi Specification and YAML don't worry! Christian and Martin will provide you an introduction to the modern paradigm of the microservice world. We will explore how your "old" skills on @Formulas, Agents and LotusScript fit into the new world of SmartNSF. SmartNSF also brings great value to XPages, Java and SSJS Gurus. And, last but not least, learn how all this fits into IBM's REST API Strategy and get inspired with what can be done with SmartNSF in your business. Will there be a demo? For sure!

For more information: XPages Webinar Series with TLCC and Teamstudio.

Missed a Webinar? Look here for the recorded webinars.
Below a recording of the Webinar Back from the Dead: When Bad Code Kills a Good Server.

Domino and XPages Applications You Can Only Dream Of


Great 'new' development products, tools and techniques continue to further develop and evolve within the IBM Notes Domino and XPages world. Some are free to use for others has to be paid. ClevaDesk is one of these amazing products which continues to evolve.
ClevaDesk system expands IBM Notes Domino capabilities and gives it new life. There is no need to think about migrating to other technologies.
ClevaDesk is a flexible IT-system with a set of business applications, a Designer to build IT-systems without programming and a platform for migration of IBM Notes applications to the web browser.
Forget about Notes Domino limitations – no more limits with ClevaDesk!
Furthermore ClevaDesk offers new opportunities for existing IBM Notes Applications.

So, are you seeking a system for rapid development of business applications? Or maybe you looking for tool to modernize your Domino applications?
ClevaDesk provides powerful designer to build applications you can only dream of.
Development of webapplications will takes hours not days.
More than 100 pre built elements and business logic will save your time and of course your money.

You can build beautiful applications with complicated business logic, portals with charts and reports, simple achieves or data storage apps. Integrate them with anything you need. Every element can be customized according your wishes.

The application below was built to analyze the work of departments in the company and effectiveness of each manager. It took only three hours to build and start it!
No changes will be made to the design of IBM Lotus Notes / Domino NSF!
You need only web browser to create applications and work with them. ClevaDesk has no limits, just your imagination.


Visit the ClevaDesk website for more information: www.clevadesk.com

Webinar Replay: Unlocking the Power of IBM Connections 6

On Wednesday, May 3 a very interesting webinar was organized by Maarga Systems, Unlocking the Power of IBM Connections 6.0. For those who missed this webinar below the content and the video.

Content
IBM has recently released the newest version of their Enterprise Collaboration Software – IBM Connections 6.0 that will bring new capabilities to Enterprise Social Networks for a simpler collaboration across the workforce and employee onboarding experience. IBM Connections 6.0 has new functionality across the board from Communities, to Files, Search, Onboarding as well as the brand-new IBM Connections Homepage – Orient Me.
In this webinar titled Unlocking the Power of IBM Connections 6.0, you
will learn:
What is new in Connections
Orient Me
Enhanced Onboarding
‘Modern’ Communities
‘Better-than-ever’ Files
Deployment methodology
Challenges in deployment and how to overcome them
Best practices
End user adoption

Presented by:
Raja Balaji MP, Solution Architect (Enterprise Collaboration), Maarga Systems and
Sam David, Associate Consultant (End User Adoption), Maarga Systems