This is the best part of what I do – sharing ideas.

Thanks to David Leedy for taking this at ConnectED in Orlando 2015 – check out the link at the bottom – what you can do with Google Photo is pretty cool apparently.

I was wondering around between sessions and someone came up and started asking me about Angular in XPages (which was the presentation I was giving with Mark Leusink later that day). So I got out the laptop, and set up on on the piano. It was outside of one of the conference rooms and made a convenient place for a demo. This “demo” then grew as other people came over to see what we were talking about.

I met a number of new people and we had a fantastic conversation about XPages, non-XPages, Angular.js and just stuff in general. It gave me an idea that I should just do this more often at any conference – hey, going to be on the piano outside the room at the time – come and talk let’s see where it goes.

Very good memories 🙂

Check out the animated version 🙂

https://goo.gl/photos/unqXJkWyLhvQ6KwC6

 

 

Advertisements

Integrating a Twitter bootstrap UI application into IBM Connections and MS SharePoint

In the last 12 months I have twice presented at MWLUG 2014 and ConnectED 2015 (with Mark Leusink) on how to run a  Domino/Angular.js application in IBM Connections and SharePoint. One of the hurdles to doing that was to figure out how to integrate bootstrap with the OneUI layout of Connections and MS SharePoint built in style.

Beyond the Everyday

This was the original http://beyondtheeveryday.com application which Mark Leusink built (for ConnectED) based on Bootstrap CSS. My job was to make it run anywhere – in this example IBM Connections. The same process described here is also used to make the application look nice in SharePoint.

c4

To do this I used an HTML Widget installed on the Connections server and with some JavaScript trickery (as explain at the conference) I was able to insert the BTE application into the Connections HTML widget relatively easily.

However – the functionality was not the immediate issue – the look and feel was.

IBM Connections uses the IBM OneUI Stylesheet for look and feel. Both OneUI and Bootstrap set default fonts and sizes on every page element and when mixed together in the wild things go badly wrong. As you can see from the image below – the bootstrap is fine – but the addition of another CSS which affects HTML and Body messes with the existing OneUI style.

c1

So the quick and dirty solution to me was to stop bootstrap from affecting everything else in the BODY of the connections page. In this case to maintain look and feel with OneUI – remove everything affecting the OneUI look.

I took an un-minified version of Bootstrap and removed the first 1400(ish) lines of code – down to the first media query. This removed default font size etc for every default HTML tag.

c3

 

This solved the problem.

Do not do this in production boys and girls – use a properly modified bootstrap file which only contains the CSS you need! Depending on the complexity of your application you may have to do other modifications to get your application looking good.

c2

Sharepoint

The process is identical for adding the application into SharePoint, although in that case I used an embeded code widget within a SharePoint page to insert my HTML/SCRIPT.

c5

#lazy #productive

 

BTE102: The Demonstration application – beyondtheeveryday.com

In the previous post  I described how Mark Leusink and I are going to be speaking about Angular.js in our presentation at ConnectED later this month.

We are very proud to announce the demonstration application upon which the presentation will be based

http://beyondtheeveryday.com

This application was created by Mark Leusink and is an amazing example of how simple an Angular application can be integrated with Domino data. The application is fully responsive and is particularly nice to use on a mobile device. All credit goes to Mark for this, I am very flattered to be talking with such an astute and talented developer. You can find out more about the application from Mark’s blog – http://linqed.eu/2015/01/14/marky-marks-mobile-first-connected-sessions-demo-app/

The application is running on a Domino server.

b1

IMG_0339

During the presentation we will demonstrate how we got the application to work on a node server hosted in Bluemix and also demonstrate the application running on SharePoint, IBM Connections and as a native Mobile application.

If you are still not sure, listen to Pete Janzen talk about his recommendations for the conference 😉

Write once – run anywhere………………. !

Practice what you preach – be fast and look sexy

As people who know me well may have heard once or twice, user experience is everything. When designing a custom web based application for a customer, there is always an unwritten requirement of “look sexy” and be fast.

This week my team and I at PSC successfully rolled out a new global application to a customer and here are some examples of the feedback we received within the first day or so:

  • I tried the new site only this morning and I have only one word: fantastic! It is very user friendly and fast.
  • …not to mention, based on the feedback from partners in the US and leaders across the world, it is the best system they have seen in the company.
  • …thanks for all your efforts! Looks “sexy” so (sponsor) is definitely pleased.

Not a single mention of how the functionality will meet their business needs. Not a thought for how well we have met their requirements. We have done that, but that would be irrelevant if we had delivered a poor looking, slow, but highly functional website.

To achieve the speed we were looking for the application is built primarily on Angular.js and Domino Data. Minimizing the amount of server processing for any given user interaction and minimizing the network traffic necessary to provide the expected response time, was a prime consideration in designing the architecture. Working with the talented design team at PSC and the customer we were able to create a visual user experience which adhered to the company’s strict style guides but looked “sexy”.

Be fast, look sexy, and make users want to tell their friends.

BTE 102: The Future of Web Development Write Once, Run Everywhere with AngularJS and Domino

Mark Leusink and I are very excited to be presenting a session at ConnectED this coming January. This is a great opportunity to come and find out about something a little different from the normal XPages run of the mill development. Mark and I will provide an introduction to the concepts and structure behind Angular.js, and then demonstrate how to build a very simple yet useful application using Angular.js and a Domino data store.

We are also going to blow some minds by showing the same application running on non-Domino platforms. If architected correctly, this transformation can be made with almost no code refactoring at all.

Come and see us in Orlando !

http://www.ibm.com/software/collaboration/events/connected/

Marky, Mark

 

Track: Beyond the Everyday

Abstract

AngularJS is currently the most popular JavaScript MVC framework. It’s driving more adoption and interest in the MVC/ REST API application architecture model. The ease of use, portability and re-usability of the code makes it an ideal solution for modern web developer needs. We’ll show you how to use AngularJS to modernize your existing Domino apps, while leveraging Domino’s best features. The speakers will also demonstrate how the power of architecting a solution based on AngularJS allows your Domino application to be made available through other platform interfaces. Taking “Write once, run everywhere” in the literal sense, you will see the same Angular/ Domino based app running natively in XPages, IBM Connections, Bluemix, IBM Worklight and more. Client-side JavaScript frameworks such as AngularJS are the future of web development – come and see it in action. 

Angular in XPages: Formatting Domino Data Services Date values with app.filter

In this article I will show how we can use the core angular date filter capabilities to format Date format, Domino data into an Angular.js based application

Introduction

In previous articles I have shown how to create a simple Angular.js application using a notes Domino Data Services feed from a notes database. If we want to add “date” information then we need a way to nicely format it. Using the Angular.js documentation page as reference I will show you how we can do this with Domino data.

Adding dates to our view

When we add a date field to a Domino Data Services feed we get something which is to the human eye pretty “ugly”

a1

And when we add lastModified into our template, it is well, less than appealing….

a2

 

Adding a formatting function to the template

We can modify the template to use a formatting function by changing up the template slightly and then adding a formatting filter to the application.

In the app.js we add the following

personApp.filter("formatDate", function () {
    return function (x) {
        return new Date(x);
    };
});

And then we reformat the template as such:

    <tr ng-repeat="person in people"  on-last-repeat>
        <td>{{person.firstname}}</td>
        <td>{{person.lastname}}</td>
        <td class="zipCode">{{person.zip}}</td>
        <td class="user">{{person.username}}</td>
        <td class="user">{{person.lastModified | formatDate | date:"dd MMM yyyy" }}</td>
        <td><a class="btn btn-info" href="#/person/{{person['@unid']}}">Edit</a></td>
        <td><a class="btn btn-warning" href="#/person/{{person['@unid']}}/delete">Delete</a></td>
    </tr>

The critical part is {{person.lastModified | formatDate | date:”dd MMM yyyy” }}.

The documentation unfortunately is not clear on this and I found this Stackoverflow example which worked perfectly. http://stackoverflow.com/a/25856275/1171653

The resulting page now looks formatted and much easier to read

a3

Conclusion

I spent which a lot of time failing to achieve this date formatting without doing it the angular way. One quick google (or three) and I had the answer. Do it the angular way and oo look that that nice and simple formatting.