/ Development  

Unleash your inner sorcerer with this mind-blowing wizard 'Create' form

Hi there AppWorks fans,

Welcome to a new installment of AppWorks tips.

Great, where to start with this post!? How did I even think of the post? Well, let me tell that I had a backlog item on my AppWorks Tips board to have a look at the “Page flow” function for a BPM. I also have a small background with Documentum and xCP (By the way…is xCP still alive?), and in xCP you have a similar feature called “Action flow” that provides you with a wizard type of creation screen. With that information in mind, I thought to build something similar, quick and easy in AppWorks; But, as always; It’s not what it seems!. “Page flow” is the third type of execution mode (next to long- and short-lived) for a BPM…BUT, let me tell you upfront; Don’t waste your time; It looks indeed as old-school as it sounds! Read the next comment if your still interesting…I move on…

For the interesting people, the quick text-implementation-part about “Page flow”:

  1. Create a BPM with start and end; In between add some activities (I tried with 2)
  2. In the properties of the BPM, set the execution type to “Page flow”
  3. Make sure each activity is attached with a UI screen; I used the already available default entity layouts of the platform. Not particularly useful, but it did the trick!
  4. To start the BPM in runtime, I just create a basic entity with an action rule to start the BPM
  5. Publish it all, create an instance of the entity, and run the BPM
  6. Move to the inbox to open the task (in the “normal” entity runtime!); Now you get an old-school xForm view (with the entity layout loaded in) to complete the current task…AND after this, you are directly forwarded to the next task (like a wizard) to complete; this happens directly because of the “Page flow”!

As the “Page flow” heavily leans on activities, I was wondering why can’t we create a wizard type of creation-form for our entities?? YES, now we’re talking greatness again! I don’t know, but I haven’t found a feature like this (yet!) on our beloved platform. What I DO know is low-code tricks, so let me show you how you can create that wizard type of creation screen for your entity.

Let get right into it…

“Without further ado”; Open your favorite project in the AppWorks platform and create yourself a new entity. I just name it project and add a property prj_name (of type ‘Text’) together with a second property called prj_wizard_step. This last property will be of type ‘Integer’ and because we make a 4-step wizard, we make sure the initial value will be 1, and it can’t get higher than 4:


Next step is to open the ‘Create’ form; Here you add 4 ‘Container’ components and on each container you can drag & drop a property (just use four different properties). The final form can look like this:


On each container component, make sure to add a ‘Rule category’ from the right-panel properties (scroll down to see it); Name them in logic order rc_wizard_step_X:


When all containers have a ‘Category’ applied, go back to the entity overview as our next step is to create 4 event type of ‘Rule’ building blocks with names like e_onpropchange_hide_wizard_step_X; Why ‘hide’ in the naming? Well, watch the implementation of the first one 🙃:


Yes, there is no ‘Show’ action; In AppWorks terms you need see this as ‘Not-Hide’!
Neither there is an ‘Enable’ action; In AppWorks terms you need see this as ‘Not-Disable’!

I know…don’t shoot the messenger!

Great…Time for a first publication. In runtime, you can now create a first entity instance with only showing the first-step wizard container:


You can play with the ‘Wizard step’ number to move forward and backward through the different containers…

To continue our implementation, we now add a new action type of ‘Rule’ BB to the entity; Name it a_increase_wizard_step with the label Next >. In the action rule, we simply increase our wizard step property with 1 (and hide the action when step 4 is reached):


Finally, we open the ‘Create’ form again to make the ‘Wizard step’ property a ‘Text only’ type of property, and we add our ‘Next >’ action on the form; What we also do is making sure the ‘Container’ components overlap each other…I know; It’s not ideal, but it does the trick well! Also don’t drag & drop them on each other, but use the keyboard arrow-keys to move them over each other…like this:


I know, the screenshot doesn’t show the overlapping containers; Trust me…they’re overlapped!

Time for a publication and to try out our smart work in runtime! Works smoothly from my side…✅

Now for a last question which you probably also asked yourself: How can you prevent to hit the ‘Create’ button before finishing the wizard? Now we’re talking…I thought the post was already DONE! 😅

Well, how would YOU solve this? I say this is just another business rule applied onto a ‘onCreate’ event checking if the wizard is at step 4; If not, show an error; I name it e_oncreate_show_non_complete_wizard_error with an implementation like this:


Does it work?…Hell yeah does it work!! ✅

#SUPPORT: A wizard like this would be helpful for the platform; If OpenText can make it so the containers don’t overlap it would be a solid solution to use. Or maybe do a better implementation on managing “form sections” as I also tried it with those, but bloody-hell; These sections never stay in place or do exactly what you don’t want them to do…Just be and stay as an independent section #23.4!? We really need to start moving to the concept of layout managers like in JavaFX with Border-, Flow- or Tile-layout.

That’s a nice wizarding (Harry Potter) “DONE”; Comment me if you found this interesting or if you already use something like this in your project. I must be honest that my projects don’t have this requirement yet, but I can imagine it would be a solid way to enrich your entity with data in the initialization phase without creating a huge creation screen showing all information in one time. Only show your users the information at the correct place and the correct time to not get overwhelmed with data. Also, you would like to do focused work…That’s the same with your end-users! Have a good weekend and see you next week for a new post on AppWorks Tips.

Don’t forget to subscribe to get updates on the activities happening on this site. Have you noticed the quiz where you find out if you are also “The AppWorks guy”?