Skip to main content

The iPhora Journey - Part 9 - Flow-based Programming for Your User Interface

In general, for non-software developers aka business users, an Application is one single object that they download and install onto their device whether a phone or laptop. It may also be a solution that they can access from their web browser. It may contain a series of screens that they navigate between as they use it.  The Application most likely includes many components working in unisons some in the background and some generating the visual interface that they see.

The Application may have many screens and visual design elements. For example, you might have a dashboard that shows aggregated data, a grid that list documents, or a form that users will use to fill out data. 

Many solutions layout out the different screens using a tree structure that shows the relationships between screens.  Usually, you build the connections between the pages by selecting actions within a screen. For example, in Microsoft Power App. the tree structure looks like:



However, we wanted a more visual and intuitive way for any user to build their solution allowing them to connect the different parts of the solution as easy as analogous to building with Lego blocks.

We came up with the concept of AppBlocks which represented common components of an application like a form, grid and page.  Each is a design element with pre-defined properties and behavior on how they interact with other AppBlocks within an application.

Originally AppBlocks utilized a simple block-based interface with pre-assembled components based on given templates that users might commonly use.  This was somewhat restrictive, but worked well.  This worked fine until the user wanted to make additional changes or enhancements to the design.


iPhora AppBlock version 1


Therefore, we looked for a more flexible approach where users could utilize a number of predefined design templates, but also allowed them to visually customize the design of the application without the need for developers to create code.  They could even start from scratch with no pre-defined template.

Since we were already using the mxGraph library to allow users to visually design and create their own processes, we wanted to see if was possible to use it for creating the user interface.  A user interface and how a user navigate throughout an application is essentially a flow. In fact, developers have used Node Red to create dashboards, but only as a single design element.

But the trick would be again be how to treat each component as a black box with interaction with between AppBlocks governed by a common bus that facilitated communication.  In this case, the communication was not only data but user interaction.

Unlike the process node elements, AppBlocks, were much more complex in nature. AppBlocks themselves contained a variety of design elements within themselves and we needed to keep track of the different design elements within an AppBlock.  Again, the flexibility of using JSON to represent objects and design came to light. 



iPhora AppBlock version 4

It took almost 6 months, but we were able to get it working. As shown above a user can easily visualize the design of the application that they have created making it easier for them to create and edit applications.  Does this approach work for all applications and the answer is no.  However, it provides 90% of the need.  

Now that we have the tools to visually create applications and processes for which business users can use to automate their processes, we needed a way for iPhora to go beyond basic workflow. Something that business users could easily utilize to scale and handle complex workflows and processes.  Next time, iPhora ActionStreams.

The iPhora Journey - Part 8 - Flow-based Programming
The iPhora Journey - Part 7 - Transforming Domino with Microservices
The iPhora Journey - Part 6 - An Application, Rethinking and Redefining
The iPhora Journey - Part 5 - Dammit Jim, I'm a LotusScripter not a JavaScripter
The iPhora Journey - Part 4 - JSON is King - The How
The iPhora Journey - Part 4 - JSON is King - The Why
The iPhora Journey - Part 3 - Creating an Integrated UI Framework
The iPhora Journey - Part 2 - Domino, the Little Engine that Could
The iPhora Journey - Part 1 - Reimagining Domino



Labels:

Comments

Post a Comment

Popular posts from this blog

The iPhora Journey - Part 8 - Flow-based Programming

After my last post in this series -- way back in September 2022, several things happened that prevented any further installments. First came CollabSphere 2022 and then CollabSphere 2023, and organizing international conferences can easily consume all of one's spare time. Throughout this same time period, our product development efforts continued at full speed and are just now coming to fruition, which means it is finally time to continue our blog series. So let's get started... As developers, most of us create applications through the conscious act of programming, either procedural, as many of us old-timers grew up with, or object-oriented, which we grudgingly had to admit was better. This is true whether we are using Java, LotusScript, C++ or Rust on Domino. (By the way, does anyone remember Pascal? When I was in school, I remember being told it was the language of the future, but for some reason it didn't seem to survive past the MTV era).  But in the last decade, there a...
Post a Comment
Read more

Creating Twitter Bootstrap Widgets - Part II - Let's Assemble

Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget Creating Twitter Bootstrap Widgets - Part II - Let's Assemble Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together This is two part of my five part series "Creating Twitter Bootstrap Widgets".   As I mentioned in part one of this series, Twitter Bootstrap widgets are built from a collection standard HTML elements, styled, and programmed to function as a single unit. The goal of this series is to teach you how to create a Bootstrap widget that utilizes the Bootstrap CSS and Dojo. The use of Dojo with Bootstrap is very limited with the exception of Kevin Armstrong who did an incredible job with his Dojo Bootstrap, http://dojobootstrap.com. Our example is a combo box that we are building to replace the standard Bootstrap combo box. In part one, we built a widget that looks like a combo box but did not have a drop down menu associated with it to allow the user to make a select...
Post a Comment
Read more

The iPhora Journey - Part 3 - Creating an Integrated UI Framework

The iPhora Journey - Part 1 - Reimagining Domino The iPhora Journey - Part 2 - Domino, the Little Engine that Could The iPhora Journey - Part 3 - Creating an Integrated UI Framework There are many ways to create the user interface (UI) for a web application. The HTML page could be created on the server and then pushed out. It could be static with the data generated on the page by the server with JavaScript, providing a more dynamic experience, or the server could generate new HTML content to update portions of the web page. XPages or PHP are good examples of this. Another method is to have the web page partially generated by the server and have JavaScript build the rest of the HTML by pulling data from the server via an API. This is the approach used in the Single Page Application (SPA) model. In all cases, it is still dependent on the web server technology being using.  As mentioned previously in this blog, XPages is dependent on complete integration between form and document, whi...
Post a Comment
Read more