Questions and Answers from deploying a Teamroom application on Bluemix

Introduction

write once, run everywhere

Thise WORE slogan is used often in cross-platform solutions, also in IBM Domino. But what if you move your XPages application from an on premise Domino installation to the cloud, more specific IBM Bluemix?

Teamroom

To gain some experience in this area I decided to take a well known application, IBM’s Teamroom and deploy it on Bluemix. I will spare you the details of creating a Bluemix account, setting up Domino Designer, deploying the Design application and binding it to a XPages NoSQL Database service. I will focus on adapting/preparing the Design of the XPages application and some areas I have not found an answer for (yet).

First consideration – Choose your data-binding

bluemixContext

Bluemix requires the separation of design and data so if you haven’t use this principle your applications yet, you must apply it now. Second, Bluemix will allow you also to run your XPages application in a mixed environment (part cloud / part on-premise) so if your application will do so the bluemixContext object will let you identify where your application is running and point to the corresponding data NSF.

DAO Bean

In my case the Teamroom application would only run in Bluemix so instead of applying bluemixContext.getDataService().findDatabaseName() I prefer to use Oliver Busse’s daobean which I have been using in other applications as well. This allows me to use the shorter dao.getDbpath() for xp:dominoDocument and xp:dominoView data-binding.

Remember: in the Teamroom design you need to set this property for every Document and View binding!

<xp:this.databaseName><![CDATA[#{javascript://bluemixContext.getDataService().findDatabaseName()
dao.getDbpath()}]]></xp:this.databaseName>

Use the search function in DDE to locate where these bindings are used.

Valuepickers

Value pickers are used throughout the Teamroom application and for the dataProvider property you need to calculate the location of the database.

Search after dataProvider and you will get the list of design elements where they are used. Look for the once who use the xe:dominoViewValuePicker since they are using a View as data-source. Again make the database location computed.

Addressbook

Some dataProviders use xe:dominoNABNamePicker and the location of the server is set via the Teamroom Setup function, which asks for the web server address. Default the web server address where the design resides is filled in. I tried to fill in the ip address of the server where the data resides (gathered via dao.getServer()) but this still did not allow me to open an NAB.

@dbcolumn @dblookup

What is an XPages application without the @dbcolumn and @dblookup functions? Use DDE to allocate in which design elements there are used and exchange the @DbName() function with bluemixContext.isRunningOnBluemix()? bluemixContext.getDataService().atDbName():@DbName or dao.getServer()+”!!”+dao.getDatabase()

database object

With the database object is you can make a quick reference to the NotesDatabse class, and so it is used throughout the Teamroom application. Mind a database.isFTIndexed() to check if the search bar will be displayed or not? Again do your search in DDE.

You can apply method chaining e.g. dao.getDatabase().isFTIndexed()

Run form validation

I noticed that I had to disable the option to validate the saving of documents using form validation (on document save option). Otherwise the operation failed silently.

Changing form name

Adding a team member via the browser resulted in a document created with the form reference of Team Member Profile   –   ParticipantProfile. If you add a member via the Notes client the form reference will be ParticipantProfile. This explains why newly created members did not appear in the list at first.

So I modified the form name as:
<xp:dominoDocument formName=”ParticipantProfile” …

I also set this alias as first in the Notes form. Not sure if that is necessary.

Wrap-up

So far so good. So how “Bluemix ready” is my Teamroom and what are my first thoughts?

Except the lookup to the name and address book I pressume my Teamroom is working as normal. I guess you can call this is major issue.

The tag cloud is not working, but that is due to the fact that the  xp:tagCoud control does not provide a database property (yet). Again I would call this a major issue.

Looking at the design of the Teamroom and counting the number of design elements I would think the development team has made the application design too complicated. I think the power of custom controls and property definitions is that you can re-use them in complete other ways and so reduce the amount of design elements.

I also notified almost no Java code in the design. Perhaps adding some classes for the objects can also reduce the amount of design elements dramatically. Also the application might get less spaghetti coded with logic stored in a central place.

Going through the code resulted in some new “discoveries” and was therefor fun to do. I will write another post about the things I haven’t used before.

Happy development and looking forward to next week’s Engage =)

 

 

Resource optimization for Anonymous users

The ‘Use runtime optimized … resources’ is a great XSP Properties property to downsize the amount of calls to the Domino server for downloading stylesheet and javascript resources.

In order to reduce the size of the download(s) the rendered property in a Theme design element can be handy.

For example resources that are used in Xpages that are not accessible by Anonymous users you can initially restrict via:

Screen Shot 2016-03-08 at 12.15.01

When they later logon and access XPages that use the resource, it will be available.

Just a simple tip. Happy development =)

Styling the Pager control for Bootstrap UI

Many of us are acquainted with  Bootstrap in our XPages application. However if you place a Pager control on your XPage it does not render according bootstrap style.

So what can you do?

If you have the option to install the Extension Library with Bootstrap in it: DO IT.

If you don’t have that option you can place the Bootstrap resources in your NSF or use a CDN.

If you are using these last two options you will notice the Pager control is still non-Bootstrap styled. You can either:

  • Apply CSS yourself (link, link)
  • Apply your renderer (link)

I noticed in the first approach the … display for page numbering will not be proper styled:

Screen Shot 2016-03-01 at 10.46.13.png

If you are a CSS-wizard you probably can fix this (I can’t).

The second approach renders the Pager perfectly with Bootstrap style applied and hopefully the strange behaviours Frank van der Linden refers to do not appear.

Happy development =)

 

 

Working with JSON in your XPages application – Refined view

In a previous post I wrote how you could use a Notes view as the data source for JSONObjects. In a recent project I needed to minimize the data amount to transfer so I had to exclude the fields that contain no value. Here is the @formula I can up with for the column value:

REM { Patrick Kwinten

Quick way to deliver ‘cached’ JSON objects from Notes documents

};

REM {JSONObject bricks};

jsonOpener := “{“;

jsonSeparator := “,”;

jsonClosure := “}”;

REM {String helper};

src := “\\”:”‘”:@NewLine:”\””;

dst :=  “\\\\”:”\\'”:”\\n”:”\\\””;

REM {Define which fields to exclude/include in JSON object};

REM {“Idea taken from http://www.eknori.de/2012-06-01/use-transform-to-build-json-and-consume-the-output-in-an-xagent/&#8221;};

_exclude:=”$FILE”:”$Fonts”:”form”:”$Revisions”:”ID”:”ModifiedBy”:”$TUA”;

_fld:=@Trim(@ReplaceSubstring(@DocFields;_exclude;@Nothing));

REM {Output for “custom” fields. Empty values are excluded};

_fldOutput := “”;

@For(

n := 1;

n <= @Elements(_fld);

n := n + 1;

@Do(

_fldVal := @Text ( @GetField ( _fld[n] ) );

@If(_fldVal != “” ; _fldOutput := _fldOutput + “\”” + _fld[n] + “\”:\”” + @ReplaceSubstring( _fldVal; Src; Dst )  + “\”” + @If(n != @Elements(_fld); jsonSeparator;””); “”)

)

);

REM {Prepare output};

outputStr := “”;

outputStr := outputStr + jsonOpener;

REM {Output for “default” fields};

tmpUNID:= @Text(@DocumentUniqueID);

outputStr := outputStr + “\”docUNID\”:\”” + tmpUNID  + “\”” + jsonSeparator;

outputStr := outputStr + _fldOutput;

REM {Finalize JSONObject};

outputStr := outputStr + jsonClosure;

REM {Return output};

@Return(outputStr)

As a result I have “lesser” JSON Objects in my view:

Screen Shot 2016-03-01 at 10.20.40

Born Social available on GitHub

A long, long time ago I wrote about a project to deliver small building blocks to deliver features from the IBM Connections in XPages application. The posting can be found here: https://quintessens.wordpress.com/2015/04/16/born-social-create-a-social-notes-application-from-scratch/ .

Here and then I was asked to share the project or asked about the progress but since I rarely work with the Connections  platform anymore I thought it could be helpful to upload the Born Social project on GitHub so people can make use of it if they like to.

Unfortunately in the meantime I did no hear or read so much about integration between Connections and IBM Domino so I am not sure if this is a (hot) topic anymore. My initial thought with the project was that it would be ‘cool’ to utilize data in Connections in XPages applications.

I also wrote a small document that helps you to get the application up and running and explains how to use the re-usable custom controls.

The project is available here on GitHub.

I just modernized an application

Introduction

While following the buzz from IBMConnect16 remote I have been working in spare time on my Bildr project available on OpenNTF.

This time I have been focussing on improving the UI by adding more material design principles which should make it easier to distinguish content on a page. Beside that it is just good fun to work with UI sometimes it forces you to improve the back-end logic also.

Capture02

The image above demonstrates the display of related content on a single page where a profile contains lists of related documents.

NoSQL is a party

The following image demonstrates the information (e.g. categories) abstracted from a list of documents and on the right a random selected document from that list and showing some abstracted information from that document.

Capture04

Here you can see well IBM Notes works as a nosql database where documents are loosely coupled and may contain almost anything (well I try to avoid rich text). Especially in a rapid application development paradigm I like the flexibility of nostrict data structure at the time you start developing.

I have not heard much news about NSF from IBMConnect (Solr? Graph features? Performance improvements?) to make it competitive to other nosql options (why do I not see NSF back in this list?).

I hope IBM is aware of NSF’s image problem and admits steps need to be taken to improve it.

Bluemix

I am not sure what the next step for the app will be but I haven’t tried it on Bluemix yet, which could be interesting. The XGallery demo on YouTube shows some great potential.

 

Modernizing a Notes application

Introduction

The quickest way of modernizing your application build on Notes is probably by keeping it on that sublime application platform and provide a new user-interface and updated business logic to it.

As a demonstratable example I would like to bring up my own Bildr project on OpenNTF.

A brief history

The application started initially as a web browser display only and create content via the Notes client application in the early 2000’s. From that the application was updated in a create content via the web browser too features.

Later the oneUI was implemented in a later step also utilizing the Application Layout control. With the Bootstrap4XPages plugin a responsive UI could be delivered a couple of years ago.

Nowadays the Application Layout control is no longer used but the Bootstrap responsive features and components are used further through the application.

The application still relies on XPages and Notes data (allthough used mainly in JSON format). The business logic resides mainly in Java Classes. With the separation of design and data the application could be hosted on Bluemix (not tested, please do).

Modernization

Looking back at this application story I believe the application will change also in the future (or die) perhaps a challenge could be to have the data optional in a different source (e.g. MongoDB) or exchange XPages for Angular and run it on Node.js.

So if you have experience moving data from Notes to MongoDb, applying a similar ACL and Roles security model on your application I would be happy to hear your experiences.

Or if you are still on the Notes client only level and want to bring your application to a (mobile) browser I am happy to exchange ideas with you and learn from your situation.

New release

Why am I saying this? Today I uploaded a new version on OpenNTF and for many Notes developers who a) not have taken the XPages path yet b) unfamiliar with Java and JSON the application could be a great starter example.

Lately there are not that many (new, updated) projects (applications) available at OpenNTF so the chance to find a working demo to see and understand the code and data running are a bit scarce (I am sorry).

I remember in the days of Superhuman Software a quote about Notes and collaboration was “dare to share” so I would challenge more developers to do so. We can learn a lot from examples from others and I thank those people who (still) do and from which I can learn from!

I wish you a wonderful learning experience at IBMConnect 2016!

Capture04

 

Bootstrap Pills navigation for Dynamic Content control

Introduction

Besides parameters you can include a hash (#) property in the URL in your XPages application. This “fragment identifier” is a short string of characters that refers to a resource that is subordinate to another, primary resource.

So it is mainly used to set a location anchor to a part in a page.

In this post I will show how to get value of Hash property in XPages and make a nice Bootstrap Pills navigation control for the Dynamic Content Control

XPages

In XPages you can use it within the xp:link control but the dynamic content control also makes use of it.

XSnippet Dynamic Content Control

The following XSnippet demonstrates how to set up a dynamic content control:

<?xml version="1.0" encoding="UTF-8"?>
  <xp:link escape="true" text="Load Dynamic Content Server side" id="link1">
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial">
      <xp:this.action>
        <![CDATA[#{javascript:getComponent("dynC").show("key1")}]]>
      </xp:this.action>
    </xp:eventHandler>
  </xp:link>
  <xp:link escape="true" text="Load Dynamic Content Client side" id="link2">
    <xp:eventHandler event="onclick" submit="false">
      <xp:this.script><![CDATA[XSP.showContent("#{id:dynC}","key2")]]></xp:this.script>
    </xp:eventHandler>
  </xp:link>
  <xe:dynamicContent id="dynC" useHash="true">
    <xp:this.facets>
      <xp:panel xp:key="key1">Content1</xp:panel>
      <xp:panel xp:key="key2">Content2</xp:panel>
    </xp:this.facets>
  </xe:dynamicContent>
</xp:view>
With this snippet you get the following Hash set in the URL of your XPage: #content=…

Getting value of Hash property

I suggest to use one of the following 2 options to collect the value of the hash property:

  1. Use a custom function
  2. Use Dojo

The first option is another XSnippet by Thomas Adrian. The second is a suggestion by Mark Leusink to (re)use Dojo.

getHashUrlVars

Include the function in a shared CSJS library and call it via the function getHashUrlVars()["content"].

dojo.queryToObject

The dojo approach is also straightforward. Call the function dojo.queryToObject( dojo.hash() ); and then abstract the content property var active = hash[“content”];.

Pills navigation for Dynamic Content Control

Since there is no list item control in XPages it is a bit hard to set the properties via computation. However via CSJS you can manipulate the DOM a lot and add some responsiveness yourself.

The following script builds an unorderlist containing links to set a part of the Dynamic Content control as visible:

<xp:div id=”nav-pills-container”>
<ul class=”nav nav-pills”>
<li id=”Pictures” class=”dclist”>
<xp:link escape=”true” text=”Pictures” id=”link4″>
<xp:eventHandler event=”onclick” submit=”true”
refreshMode=”partial”>
<xp:this.action>
<![CDATA[#{javascript:getComponent(“dynC”).show(“Pictures”)}]]>
</xp:this.action>
</xp:eventHandler>
</xp:link>
</li>

<li id=”Albums” class=”dclist”>
<xp:link escape=”true” text=”Albums” id=”link1″>
<xp:eventHandler event=”onclick” submit=”true”
refreshMode=”partial”>
<xp:this.action>
<![CDATA[#{javascript:getComponent(“dynC”).show(“Albums”)}]]>
</xp:this.action>
</xp:eventHandler>
</xp:link>
</li>
<li id=”Profiles” class=”dclist”>
<xp:link escape=”true” text=”Profiles” id=”link2″>
<xp:eventHandler event=”onclick” submit=”true”
refreshMode=”partial”>
<xp:this.action>
<![CDATA[#{javascript:getComponent(“dynC”).show(“Profiles”)}]]>
</xp:this.action>
</xp:eventHandler>
</xp:link>
</li>

</ul>

The second script checks which content section is set “visible” for the Dynamic Content control via the hash property in the URL. The corresponding list item in the Pills navigation is set as active.

<xp:eventHandler event=”onClientLoad” submit=”false”>
<xp:this.script><![CDATA[function setActive(id){
$( “li.dclist” ).removeClass( “active” );
var id = “#” + id;
$(id).addClass( “active” );
}

var hash = dojo.queryToObject( dojo.hash() );
var active = hash[“content”];
setActive(active);
]]></xp:this.script>
</xp:eventHandler>

As a result I get the correct list item displayed as active for my Pills navigation:

navpills

Code

In case you want to see the code working in an example download the Bildr application on OpenNTF. There I have applied this technique for the search function.

 

Bildr 5 released on OpenNTF

Announcement

Today I released a new version of Bildr on OpenNTF ! There have been spent quiet a few long evenings coding but it was fun (I may drink at home) and interesting!

So just before the holiday season and January’s  IBM Connect buzz I thought it would be a proper moment for a release. So consider it my Xmas present to the community:-)

Modernization

I label this version 5.0 since I (almost) completely rewrote the application from scratch. Lot of the logic I have placed in Java classes and the data format is mainly JSON.

I also separated the design from the data so in principle you should be able to place the app in the IBM Bluemix environment.

Because of these decisions there is no backward compatibility so a simple replace design will not work for your existing installation.

Below you can find some screenshots of the new interface. I hope you like it.

Screenshots

startpage

uploadprofilepicture

Thank you

I would like to thank all the teachers in our community who post their presentations, code samples and answers on the platforms out there.

I have tried to post the code on Github but this failed with the Github desktop client. If some can get me started with that I will distribute the project there too.

For now:

A Merry Christmas and fortune in 2016 !