Wednesday, 30 August 2017

Using Dropify in XPages - Override Your Input Files with Style


For a single FileUpload Control in one of my XPages applications I was looking for a simple plugin to override the default style. In my search I came accross a relative new plugin, Dropify - Override your input files with style. jQuery is required to do the magic.
In order to use Dropify, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Dropify.

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 dropify has been added in the WebContent Folder.
Next the JavaScript and CSS files, dropify.js and dropify.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="dropify/js/dropify.js"></script>
<link rel="stylesheet" href="dropify/css/dropify.css" />

AMD Loader Fix
For using Dropify in XPages there is a need for an AMD Loader Fix. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. In the example below I use two javascript libraries, disable_amd.js and enable_amd.js, a solution provided by Mark Leussink. You can add these scripts to in the Script Libraries of the XPages application.

disable_amd.js
if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}

enable_amd.js
if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}

The first one is loaded before the js files, the second one after the js files.

<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="dropify/js/dropify.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>

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

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:fileUpload1}" ).dropify({
messages: {
'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace',
'remove':  'Remove',
'error':   'Ooops, something wrong happended.'
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive FileUploadControl 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">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="dropify/js/dropify.js"></script>
<link rel="stylesheet" href="dropify/css/dropify.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:fileUpload1}" ).dropify({
messages: {
'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace',
'remove':  'Remove',
'error':   'Ooops, something wrong happended.'
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-md-7">
<h3>Dropify</h3>
<h5>
Override your input files with style! jQuery is required to do the magic.
</h5>
</div>
<div class="col-md-7">
<xp:fileUpload id="fileUpload1"></xp:fileUpload>
</div>
<xp:br></xp:br>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Dropify documentation and examples

Complete Document Edit History Tracking Using LotusScript


Using LotusScript it is possible to save all changes made by users in a Notes document. Below a possible solution on which I was made noticeable and which I have implemented in a standard Notes application. In this case a DocumentHistory Field is updated if a value of a Field on the Notes Form has been changed by a user. The Date, the Name of the user, the Fieldname, the original value and the new value are stored in the DocumentHistory Field. The code is easy to customize to suit your own wishes.

A. Field DocumentHistory
First create a Field DocumentHistory on a Notes Form.
On the Field Properties Basic Tab set the Field DocumentHistory to a Multi-Value Text Field, computed with the formula DocumentHistory.



On the Field Properties Advanced Tab select Comma and Semicolon in the field Separate values when user enters. Select New Line in the field Display separate values with.


B. Form - Globals - Declarations
First a dynamic array in the Form Declarations section needs to be declared.

Dim FieldValues() As String 

C. PostModeChange
Next add the following code in the Postmodechange Event of the Form.

Sub Postmodechange(Source As Notesuidocument) 
'build array of current filed values 
Dim session As New NotesSession 
Dim db As NotesDatabase 
Dim doc As NotesDocument 
Dim form As NotesForm 
Dim fieldnum As Integer 
Dim counter As Integer 
Set db = session.CurrentDatabase 
Set doc = Source.Document 
Set form = db.GetForm(doc.Form(0)) 
fieldnum = Ubound(form.fields) 
Redim FieldValues(fieldnum,1) 
counter = 0 
Forall field In form.fields 
FieldValues(counter,0) = field 
FieldValues(counter,1) = source.fieldgettext(field) 
counter = counter + 1 
End Forall 
End Sub 

Remark: If document are automatically opend in Edit Mode the above code should be added to the PostOpen Event of the Form.

D. QuerySave
Next add the following code in the QuerySave Event of the Form. If the is already some code in the QuerySave Event place the code below after all the other code.

If Not Source.IsNewDoc Then 
Call DocumentHistory 
End If 

E. Subroutine DocumentHistory
Finally add the following Sub in the Form Declarations section or a Script Library.

Sub DocumentHistory 
Dim session As New NotesSession 
Dim workspace As New NotesUIWorkspace 
Dim source As NotesUIDocument 
Dim fieldnum As Integer 
Dim entry As String 
Set source = workspace.CurrentDocument 
For fieldnum = 0 To Ubound(FieldValues) 
If FieldValues(fieldnum,1) <>source.fieldgettext(FieldValues(fieldnum,0)) Then 
entry = Date$+Chr(9)+ session.CommonUserName+Chr(9) +"Changed Field: " + FieldValues(fieldnum,0)+ " from " + FieldValues(fieldnum,1)+ " to " + source.fieldgettext(FieldValues(fieldnum,0)) 
Call source.FieldAppendText("DocumentHistory",";"+entry)
End If 
Next
End Sub

The final result is a nice document history of all the changes made by users.

Tuesday, 29 August 2017

Using Boostrap Date Range Picker in XPages


The Bootstrap Date Range Picker component creates a dropdown menu from which a user can select a range of dates. Features include limiting the selectable date range, localizable strings and date formats, a single date picker mode, optional time picker (for e.g. making appointments or reservations), and styles that match the default Bootstrap 3 theme. Originally built for reporting at Improvely, the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or from predefined ranges like "Last 30 Days". Bootstrap Date Range Picker relies on Bootstrap, jQuery and Moment.js.
In order to use Bootstrap Date Range Picker, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Bootstrap Date Range Picker.

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 daterangepicker has been added in the WebContent Folder.
Next the JavaScript and CSS files, moment.js, daterangepicker.js and daterangepicker.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="daterangepicker/moment.js"></script>
<script type="text/javascript" src="daterangepicker/daterangepicker.js"></script>
<link rel="stylesheet" href="daterangepicker/daterangepicker.css" />

AMD Loader Fix
For the Bootstrap Date Range Picker in XPages there is a need for an AMD Loader Fix. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. In the example below I use two javascript libraries, disable_amd.js and enable_amd.js, a solution provided by Mark Leussink. You can add these scripts to in the Script Libraries of the XPages application.

disable_amd.js
if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}

enable_amd.js
if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}

The first one is loaded before the js files, the second one after the js files.

<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="daterangepicker/moment.js"></script>
<script type="text/javascript" src="daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>

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

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}" ).daterangepicker({
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 30,
locale: {
format: 'DD-MM-YYYY hh:mm',        
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive Date Range Picker 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">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="daterangepicker/moment.js"></script>
<script type="text/javascript" src="daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>
<link rel="stylesheet" href="daterangepicker/daterangepicker.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).daterangepicker({
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 30,
locale: {
format: 'DD-MM-YYYY hh:mm',        
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText2}" ).daterangepicker({
singleDatePicker: true,
showDropdowns: true,  
locale: {
format: 'DD-MM-YYYY'
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-md-7">
<h3>DateRangePicker</h3>
<h5>
A JavaScript component for choosing date ranges. Designed to work with the Bootstrap CSS
framework. Date Range Picker relies on Bootstrap, jQuery and Moment.js.
</h5>
</div>
<div class="col-md-7">
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="name" value="daterange"></xp:attr>
<xp:attr name="value" value="01/01/2017 - 31/01/2017">
</xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<xp:br></xp:br>
<xp:br></xp:br>
<div class="col-md-7">
<xp:inputText id="inputText2">
<xp:this.attrs>
<xp:attr name="name" value="daterange"></xp:attr>
<xp:attr name="value" value="01-08-2017">
</xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bootstrap Date Range Picker documentation

Disable Double-Click and CTRL+E to Edit Documents Using LotusScript


In an old Notes Application I've been working on last week one of the requirements was to prevent that user were able through a double click or using CTRL + E to put a document in Edit Mode. In some old documentation I came across a solution that I had previously used in Notes applications to solve this problem. In this case I could quickly implement a solution by using some LotusScript in the Form Events Querymodechange and QueryOpen and an Action Button Edit (Document). In case I ever need this again I described the solution for myself in this blog post.

A. Form - Globals - Declarations
Initially, add in the Form Globals - Declarations the line below.

Dim EditAction As Boolean

B. Querymodechange
Next enter the following code in the Querymodechange Event of the Form.

Sub Querymodechange(Source As Notesuidocument, Continue As Variant)
If Not Source.EditMode And Not EditAction Then
Messagebox "You must use the Action Button Edit to Edit the document",64,"Edit " &_
"Document"
Continue = False
End If
End Sub

C. Queryopen
Next enter the following code in the QueryOpen Event of the Form.

Sub Queryopen(Source As Notesuidocument, Mode As Integer, Isnewdoc As Variant, Continue As Variant)
If Not Isnewdoc Then
If Source.EditMode Then
Messagebox "This document cannot be opened in Edit mode",16,"Edit Document"
Continue = False
End If
End If
End Sub

D. Action Button Edit
To make sure a document can be edited enter the following code in the Action Button Edit on the Form.

Sub Click(Source As Button)
Dim ws As New NotesUIWorkspace
EditAction = True
'   Do your checks to make sure they can edit the document, then put it into Edit mode
ws.CurrentDocument.EditMode = True
EditAction = False
End Sub

When a user double clicks in a Form in Read Mode or using CTRL + E to try to put the document in Edit Mode the Message below will appear.


A nice and simple LotusScript solution.

Friday, 18 August 2017

IBM Notes and Domino Feature Pack 9 Available for Download on IBM Fix Central (Zircon)

IBM Notes Domino Feature Pack 9 is available for download on IBM Fix Central. It seems that all Feature Packs are getting a 'name'. For Features Pack 9 this is Zircon.
Notes/Domino 9.0.1 Feature Pack 9 addresses defects in the Client, Server, and the Domino OpenSocial component. All Feature Packs are language independent and may be applied on any language version of Notes®/Domino® 9.0.1.

IBM Notes Feature Pack 9


IBM Domino Feature Pack 9


New Features in IBM Domino 9.0.1 Social Edition Feature Pack 9
The documentation in Knowledgebase will be updated with these new features to coincide with the ship date of 9.0.1 FP9

Enhancement Request To Be Able To Increase The Amgr Queue Beyond 100 (SPR #RSTNA4SL7C APARID: LO87242)
The Agent Manager's Eligible queue is now able to change from the lowest value possible at 100, to 255 which is the highest value possible via an INI AMGRMaxQueue.

Databases and views can be opened more quickly in databases that are enabled for transaction logging
It takes less time to open databases and views that are at ODS 52 or higher and enabled for transaction logging. Previously, performance for opening databases or views could be slow in frequently updated databases. This improvement is due to the implementation of less contention with update operations.

Restricting the use of mail rules to forward messages to external domains (SPR #JPAR9NEACX APARID: LO81771
You can control the extent to which users can use the Send copy to mail rule to automatically forward received messages to external domains that are not recognized by the mail server. This feature does not affect any forwarding rules that are specified in a user's Person document or any other type of mail server
forwarding or re-direction.

New Features in IBM Notes 9.0.1 Social Edition Feature Pack 9

Delegated mail files are refreshed automatically (SPR #RGAU829D4G APARID: LO48407)
If you have delegate access to another user's mail file, that mail file is refreshed automatically in your Notes client. To enable this feature, upgrade to the Mail9.ntf template provided with the FP9 Client. No notes.ini setting is required for this feature.

Support for recall of messages created with Memo stationary (SPR #JLEN9C9E3G APARID: LO77349)
When message recall is configured on the server, messages created using Memo stationery can now be recalled. To enable this feature, upgrade to the Mail9.ntf template provided with FP9.

High resolution support for the Notes Client
The Notes client on Windows correctly scales text and icons when high resolution monitors or custom DPI settings are used.

Improved name lookup in Notes
Searching by <last name first name> through typeahead or in the ambiguous name dialog, returns the same results as searching by <first name last name>. For example, searching for don smith or smith don returns the same results, including variants such as Donald, Donovan, Smithfield. To enable this feature, upgrade to the pernames.ntf template provided with 9.0.1 FP9 and add the notes.ini setting AllowWildcardLookup=1 to the Notes 9.0.1 FP9 client.

Improved support for Notes addressing with mobile directory catalogs (SPR #SAPLAK8ANL)
The list of names that is shown when using typeahead to search a mobile directory catalog is now sorted according to the directory catalog configuration. Names in local contacts follow this list. In addition, the Search directory for <characters> option is available at the end of the list to facilitate server lookup. To enable this feature, add the notes.ini setting $TypeAheadShowDircatFirst = 1 to the Notes 9.0.1 FP9 client.

Enabling and managing inline view indexing
A view index is an internal filing system that Notes uses to build the list of documents to display in a database view or folder. By default, view indexes are updated on a server at scheduled intervals. To update a view index immediately after documents change instead, administrators can enable inline view indexing. When you enable inline view indexing, a critical view is always kept up-to-date for your users.

Updating the default Java from 1.6 to 1.8 on IBM i (SPR #BYAGALM8J8)

For more information: IBM Notes/Domino 9.0.1 Feature Pack 9 (Zircon) Release Notice