Thursday, 14 September 2017

Using Smoke Form Validation And Components for Bootstrap in XPages Part 2 - Confirmation


In my previous blog post, Using Smoke Form Validation And Components for Bootstrap in XPages Part 1 - Alerts, I showed how Alerts can be used in XPages applications using the Smoke plugin. In this blog post I will show some examples of the Conformation component in combination with the Alerts component.
For more information about adding the JS and CSS files and adding the x$ jQuery selector for XPages see my prevoius blog post about the Smoke plugin in XPages.

For using the Confirmation component the x$ jQuery selector for XPages script 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(){$.smkConfirm({
text:'Are you sure?',
accept:'OK',
cancel:'Cancel'
},function(res){
// Code here
if (res) {
$.smkAlert({
text: 'Confirmed!!',
type:'success',
time : 30,
position: 'bottom-center'
});
}
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive, customizable and accessible Confirmation in combination with the Alert component including 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">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="smoke/js/smoke.js"></script>
<link rel="stylesheet" href="smoke/css/smoke.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){$.smkConfirm({
text:'Are you sure?',
accept:'OK',
cancel:'Cancel'
},function(res){
// Code here
if (res) {
$.smkAlert({
text: 'Confirmed!!',
type:'success',
time : 30,
position: 'bottom-center'
});
}
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){$.smkPrompt({
text:'Enter Full Name',
accept:'OK',
cancel:'Cancel'
},function(res){
// Code here
if (res) {
$.smkAlert({
text: 'Response: ' + res,
type: 'success',
time: 10,
position: 'bottom-center'
});
} else {
$.smkAlert({
text: 'No response....',
type: 'info',
time : 10,
position: 'bottom-center'
});
}
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button value="Confirmation" id="button1" styleClass="btn btn-success"></xp:button>
<xp:button value="Confirmation Prompt" id="button2" styleClass="btn btn-info"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

No comments:

Post a Comment