XControls

A cards-based UI for mobile and desktop IBM XPages apps, built on top of Bootcards and Bootstrap. Created by @mattwhite, @sives and @jackherbert.

XControls

XControls is a new set of Controls for IBM Domino XPage developers working on new XPages apps and on app modernisation projects. It is effectively a re-write of the Teamstudio Unplugged Controls project, but adding full support for PC browser-based user interfaces as well as mobile interfaces.

XControls is built with Bootstrap 3.x and the Bootcards project. It enables XPage developers to create controls that are responsive, optimizing to the device whether it be a smartphone, a tablet or a PC. There are three key design goals for XControls:

  1. Enable faster design and assembly of modern user interfaces, using Card & List objects (analagous to Forms and Views in traditional Notes development)
  2. Make it easy to write an XPages app which auto-optimizes to smartphones, tablets and PCs.
  3. Make it easy to create XPages apps which work offline on mobile devices (via the Teamstudio Unplugged XPages engine for iOS and Android)

Why cards

We think Cards are the design pattern for mobile of the future. The near future that is. Cards are appearing already on sites and apps like Twitter, Google Now, Spotify, Pinterest and Amazon. To kickstart your (and our) projects we decided to use Bootcards: a Cards-based UI framework built on top of Bootstrap and then extend it to work with IBM XPages so that you can quickly create applications that look good and work well across all devices.

Want to read more about cards? Try one of these links:

Native look and feel

Bootcards includes stylesheets to give your apps a native look, whether that's on iOS, Android or desktop. Try opening the demo app with multiple devices and see the difference!

The demo app is a sampler that shows all of the different controls that we offer in the XControls project, from listing data in views, viewing and editing documents to working with file attachments and rich text.

Work in progress

The XControls are a work in progress, but we have a stable release available. You can download it directly from the GitHub repository or from the OpenNTF download page.

Want to help or want to know more? Drop us a note.

The XControls project is tested using BrowserStack.

Getting started

The simplest way to get started is to download the latest release from the OpenNTF download page. Open the template in Domino Designer and then copy all of the resources, custom controls and XPages into your application.

To add XControls to your application you'll need to include the resources from our standard template. Once you've got them, have a look at some of the sample pages. Every page will need the UnpBootResources control that includes all of the CSS and JavaScript you'll use. But then there are many combinations of how to put pages together after that.