How to adapt IntelliWarp™ to my own Style Guide?

How to adapt IntelliWarp™ to my own Style Guide?

  
I want to share with you a recent field experience with IntelliWarp™ (for a quick demo about it check out this excellent post)

This feature is «context-aware» which means IntelliWarp™ needs to know how things are first set, in order to allow you to do the magic. It works great if you're starting a fresh new application. It can be tricky, however, if you want to use it in an older one. Most common trouble scenarios include dragging an object to the Web Flow or Web Screen and nothing happening. Let's see how to work that out.
 
The application I'm building is originally based on a 4.2 Style Guide eSpace, named Corporate_Main. This eSpace has evolved into its own set of rules/styles. It contains
  • it's own Style Sheet;
  • Customized header and footer web blocks;
  • Customized menu (no use of Style Guide’s MENU_ITEM and MENU_SUB_ITEM entities);
  • Some RichWidgets references;
  • Several other customized web blocks contained in a referenced eSpace, CustomWidgets
 
           
 
 
1. My first task was to build a List Screen with my new entity, EMPLOYEE, previously imported to Service Studio - but nothing happened :(

           
 
2. Looking at Service Studio Help > chapter Creating List Screens, it says there must be a minimum set of properties for IntelliWarp™ to work, namely:
  1. the entity must have more attributes than just the Id [ok];
  2. at least one of those must be of Text data type [ok];
  3. the eSpace must have been created from the Style Guide ...hummm... that must be the problem!
 
3. Upon close inspection I noticed that there was something amiss in the Style Guide of my eSpace, namely: the static entities MENU_ITEM and MENU_SUB_ITEM. So, in a new Service Studio tab, I decided to create a new Application (which brings the new Style Guide along) and then copied them back to my Corporate_Main eSpace.

           
 
4. After creating those 2 entities I tried again to drag EMPLOYEE to the flow. Success!
 
5. Now I had a brand new List screen with filter, tablerecord and pagination - all done with the look & feel of my existing Style Sheet. Only one problem: there was no header and footer (no menu as well). To fix this I had to check what was missing on the Style Guide of my eSpace. I know there was a Header, a Menu and a Footer web block... what were the differences towards the original Style Guide? One very obvious: the Web Flow was called Common_Corporate... which explains why IntelliWarp™ didn't work it out. I renamed it to Common like the original Style Guide and dragged the entity to the flow again. This time everything was in place. List screen was working pretty well now.
            
 
7. Next, I needed to create a Show Screen. There are two ways to make it work: either by dragging the entity to the Web Flow again or by right-clicking on an expression in the TableRecord of the List Screen (right-click context menu). Both ways worked, thanks to the previous alignment I did with the Style Guide.

            
 
Check out this interesting post if you still have problems creating edit/show screens.
 
8. But my Show Screen was different: it should display an image of the person. And IntelliWarp™ worked it out pretty well, just like explained in Service Studio Help, Creating Entities to Store Database Images. The only issue was getting IntelliWarp™ to understand the exact place where to put the image. So I had to carefully select the first table cell of the Show Record and click on Menu > Import > Image Row for 'EMPLOYEE_PICTURE' Entity... it worked like a breeze. The controls, the new entity, as well as the default image were all incorporated in the eSpace.

            
 
9. Now it was time to create the Edit Screen. Again, this was simple to do either by dragging the EMPLOYEE entity to the Web Flow or by right-clicking on one of the existing screens to pop up the right-click context menu. IntelliWarp™ even added a new reference - the Popup_Upload screen from RichWidgets - so that my Edit Record would display a control to change the picture. Pretty cool.
 
           
 
10. Still on the List Screen, I had to allow the record deletion. This was pretty straight forward thanks to IntelliWarp™: drag a button, then right-click and Link to New 'DeleteEmployee' Screen Action. In this case nothing else is required except RichWidget's Feedback_Message action.
  
           
 
11. One further thing I had to do was to change the Department (Text) attribute from the employee to an entity reference (foreign key), called OrganicUnitId. This would be a lookup in my new application and was easily done with TrueChange. TrueChange™ helps to find and replace your changes throughout the whole eSpace rebinding the new objects to their new owner, automatically.
   
           

 
Finally, IntelliWarp™ further accelerated this task by allowing me to drag and drop the new OrganicUnitId attribute into the Edit Record. This instantaneously created a dropdown control.
 
                                   
 
12. With the above things in place I wanted to make this application richer. And also help my fellow users on selecting an Organic Unit for their employees in the long list of their corporate departments.

       Enter AutoComplete:this control allows the user to filter the list of selectable items by typing part of their name.
 
       Enter IntelliWarp: with a simple drag and drop you can make a dropdown control into an autocomplete in a flash.
 
       Requirements: RichWidgets web block Input_AutoComplete, action Input_AutoComplete_GetIdentifier and action Input_AutoComplete_ShowList.
 
…a first try didn’t work nicely because I was missing some of the above references. Then, once all were available, I had the control running nice and easy.
  
                                    

13. My application was almost done. I still missed these final steps, which I'm simply enumerating:
  • Linking my screens to my existing menu (it was a customized menu…);
  • Adapting my screens to the rest of my Style Guide (with the custom web blocks);
  • Translating my screens (yep, my customer is in Portugal);
  • Cleaning up unwanted stuff: in this case, permission areas, since I already had my own;
 
 
There. I hope this helps clearing out some questions about using IntelliWarp™ patterns. Not all patterns were described in this post, so I'm leaving some room for further discussion. As a note, for this task I used Service Studio 5.1.1.7
 
Cheers!
 
PS: Don’t forget to check out Service Studio Help, About IntelliWarp, every time you run into any trouble again.
PS II: Problems setting up a Detail List with IntelliWarp? Check out this cool post.

Very nice post. In my job the intelliwarp is also customized and i didn't had the all picture of how they have done it.

Thanks.