New Scaffolding (Platform 9)

  
In Platform 9, we tweaked scaffolding (previously known as IntelliWarp) in order to improve the usability of your applications.

We studied several real-world applications and discovered that the majority use unnecessary screens, thus increasing app navigation complexity. For instance, consider a CRM application where a user needs to edit a contact. In order to do that, the user needs to find the contact in the list screen, click on it to go to a Show page, and click the edit button in order to finally reach the edit page.
scaffolding_2screens.png

With Platform 9, you only need two screens: the list screen (“Contacts”) and the new “ContactDetail” screen. This Details screen allows you to both show and edit a contact in a single page. This simplifies app navigation, while avoiding unnecessary screens and application logic.

How did we achieve this?
In order to join the Show and Edit screen, we used the new html5 compliant Form widget. This widget, also released with 9, enables the user to see and edit a particular record.

In this video you can see a contact being viewed and updated using the new details screen that resulted from scaffolding. It uses the new Form widget, which lets you Undo changes, focus on inputs by clicking on the labels - important for mobile scenarios - and configure the label positioning with a simple click.
form_ss.png

Using the same screen to show and edit contacts creates a new challenge: how to deal with users that can edit a specific contact versus those that can only see it? You can achieve this with the “Enabled” property on the form. If set to false, all inputs inside the form will be disabled, making the form readonly.

form_enabled.png


Note that if you really need it, you can always customize the result of scaffolding and create your own show screens. For instance, if you want to show your contacts in a way that simulates a real business card, you can build a screen that provides such a layout.

However, in the most common scenarios, specially in back offices, having just 2 screens makes your life and the life of your users a lot simpler.

Cheers,
Vasco Pessanha
Hi - I like this new feature, great way to simplify life for the users. However, what if the text to show in a field is longer than the edit box?

The old way, the "show" screen displayed the data as plain text, so it took up as much space as needed - you could review it easily at a glance. Now because text is shown within an edit box (albeit read-only until you click in it), if the text is longer than the box you have to scroll within it to see it all. So using this scaffoled screen as a view screen might not work so well.

Is there a simple way to indicate that a text field should display using as much spae as needed until you actually edit it? Or if I find this is a problem, is it best to add my own "view" screen in between the list screen and the edit screen?

Cheers! Luke.
Hi Luke,
Thanks for that feedback!
It makes sense and scrolling horizontally inside the input can compromise the end user experience.
How long is the information you are trying to show? Does it make sense to increase the input size or use a textarea?
 
Cheers,
Vasco Pessanha
Luke Burgess wrote:
Hi - I like this new feature, great way to simplify life for the users. However, what if the text to show in a field is longer than the edit box?

The old way, the "show" screen displayed the data as plain text, so it took up as much space as needed - you could review it easily at a glance. Now because text is shown within an edit box (albeit read-only until you click in it), if the text is longer than the box you have to scroll within it to see it all. So using this scaffoled screen as a view screen might not work so well.

Is there a simple way to indicate that a text field should display using as much spae as needed until you actually edit it? Or if I find this is a problem, is it best to add my own "view" screen in between the list screen and the edit screen?

Cheers! Luke.
 Hello, i completelly agree you you! The Form widget is good for small fields with little text. For larger things like memo fields, combo boxes, ..., is not so good because it can hide information from the user.

In my opinion Scaffolding should permit both options. Something like this:
  1. first create the list screen 
  2. second create the detail screen
  3. on a third drag an edit screen is created and the detail screen is changed to hold an edit widget instead of a form widget

Greetings
Eduardo Luís