4 votes
5997 downloads
Published on 04 May 2011 by OutSystems

[OutSystems Style Guide] Discussion

thumbs_up_ico0thumbs_down_ico0
Hi guys,

I wanted to share with you a set of cheat sheets for creating screens based on the Style Guide template. Basically here's what you'll find:
  • Using the Rich Widgets Calendar Input
  • Using the Rich Widgets Popup Editor
  • Using the Rich Widgets Info Balloon
  • Creating a Show Screen
  • Creating an Edit Screen
  • Creating a List Screen
  • Editing the application's menu

Hope it helps you get started!
Mário
thumbs_up_ico1thumbs_down_ico0
Hi,

I was tired of seeing the TEMPLATE_XXX tables being cloned everywhere so I created a template_SampleData.oml with all tables and structures and refactored the template.oml so it uses the template_SampleData.oml

I've done so for the 4.2.14 version of the Style Guide

Could this be usefull for 5.x versions?

Regards

Rui


thumbs_up_ico0thumbs_down_ico0
Hi Rui,

Indeed the template in 5.0 looks similar, so the refactoring you suggest might be useful for those who use the StyleGuide intensively. I had also done a StyleGuide Lite for personal use back in 4.0, so I empathize with your problem.

I'll forward this to the engineering team, so they take a look at it for future versions of StyleGuide.

Thanks for sharing!

Regards,

Paulo Tavares
thumbs_up_ico0thumbs_down_ico0
@Paulo 

It would be good if StyleGuide solution also included a blank template page with a side panel, similar to one used in "service center" (http://localhost/ServiceCenter/) to display "Platform Server" information and "Recent items" (ie the right side panel).
thumbs_up_ico0thumbs_down_ico0
Hi Robert,

Thanks for the suggestion. Our current Style Guide has gone through several iterations in the past, but the matter of fact is that it has been progressively developed to reach where it currently is - I've even worked in the development of the 3.2 and 4.0 versions of it.

We are aware that there are limitations in design for some more specific pages, but the approach taken to design it was an 80-20 one: 80% of the common scenarios are covered by this small 20% of screen layouts and templates we have included there.

That is not to say that there aren't specific situations when you require the sidebar, but asides from there not being a generic and easy to use solution for a sidebar template (without using tables, which we were trying to get away from), we chose to leave the Styleguide easy to use for beginners and experts alike, and so compromises had to be made.

All this to say that even though there are no plans to include it in the near future, the suggestion was noted and forwarded internally ;)

Regards,

Paulo Tavares
thumbs_up_ico0thumbs_down_ico0
@Paulo
 
Thanks, so would you say way best approach to do it right now is to create a table for the body contents, create a web block for the sidebar, create CSS style for the sidebar and add the sidebar web block to the table, then make adjustments where necessary.

That seems to work! :)
thumbs_up_ico0thumbs_down_ico0
I would like to leave here some pointers to resources in the OutSystems website that can be useful to learn about the OutSystems Style Guide and how you can use it to kick-start the development of your applications.
 
The OutSystems Style Guide is a template OutSystems application that implements several web patterns and functionality that can be easily reused in the development of new applications – tabbed screens, menus, popup windows, list screen, form screens, etc..Besides the web patterns, the Style Guide also proposes a screen layout (that can be adjusted to your needs) and a set of standard common web blocks (header, footer, menu, etc.). To read a detailed list of the OutSystems Style Guide functionalities, refer to the OutSystems Style Guide component page.

You can learn more about the OutSystems Style Guide in the following resources:
thumbs_up_ico0thumbs_down_ico0
Hi,

I would like to highlight that from OutSystems version 5.1 onwards, the OutSystems Style Guide component is not needed to accelerate the creation of typical web patterns in OutSystems applications.

From OutSystems version 5.1 onwards you have available the ability to create a Style Guide eSpace directly in Service Studio with the New > From Style Guide option. This creates an application with the basic structure of a typical OutSystems application (Menu, Header, Footer, Enterprise Manager integration, etc.)



This new features comes with the new OutSystems IntelliWarp Technology that lets you create typical web patterns with only some drag and drops (web listings, web edits, auto complete searches, pop-up balloons, etc.).

You can read about the OutSystems IntelliWarp Technology in the What's New in Agile Platform version 5.1 document.

You can read the documentation of the available IntelliWarp patterns in the About IntelliWarp section in the Service Studio Online Help.

The best way to get a grip of this new feature is to do the Service Studio 5.1 embedded tutorial Learn to build an App in 5 mins.



Kind Regards,

Daniel Lourenço
OutSystems



thumbs_up_ico0thumbs_down_ico0
Hello.

I'm using Service Studio 5.1 and I was trying to edit my application menu based on Mário's cheat sheets but there's no existing menu item to copy in the base style guide. The Menu  web block in Common web flow has only a Container_Round widget.
thumbs_up_ico0thumbs_down_ico0

Hi Daniel,

Just installing 5.1 community edition and saw that the Style Guide was now in Service Center, only what is done with the RichWidgets components that where in this solution?

Are they integrated in Service Center or another solution? And how to upgrade these?

Kind Regards,
Evert
thumbs_up_ico0thumbs_down_ico0
Hi Evert,

I am sorry but I id not clearly understand your question.

The RichWidgets extension is now installed automatically when you install the the OutSystems Community Edition 5.1 .

Using the New > From Style Guide option (that is in fact the default if you simply press the "New"), your eSpace immediately has several things that are normally in an OutSystems application structure (particularly, it references the RichWidgets extension). This does not depend on the Template eSpace (that is now deprecated).

Please tell me if does not answer your question.

Kind Regards,

Daniel Lourenço
OutSystems
thumbs_up_ico0thumbs_down_ico0
@João Heleno

João, answering your comment:
  • Hello. I'm using Service Studio 5.1 and I was trying to edit my application menu based on Mário's cheat sheets but there's no existing menu item to copy in the base style guide. The Menu  web block in Common web flow has only a Container_Round widget.
Yes, that is in fact the behavior of Service Studio when you create a new application - the Menu block us empty. Once you create a listing screen (by dragging an Entity to the a Web Flow), the menu will be populated with the related entries. For example, if you drag a CONTACT entity to a web flow, the menu will have a main entry CONTACTS with a sub-entry List Contacts (see the screenshot below).



Kind Regards,

Daniel Lourenço
OutSystems
thumbs_up_ico0thumbs_down_ico0

Hi Daniel,

Sorry, I've looked wrong. I upgrade from 5.0 to 5.1 (community) and all the espaces of the style guide were 'outdated' so look for a new style guide which is now in integrated. But I thought the richWidgets were also outdated but saw now that this espace isn't and only the templates are (which I can delete now).

Thanks for the quick reply!
Evert