Other OutSystems sites...
OutSystems Website
About Agility Blog
OutSystems Network
Login
Signup
Forums
Academy
Forge
Ideas
Forums
›
Forge Discussions
›
Discussion
OutSystems Style Guide
4 votes
5858
download
s
Published on 04 May 2011 by OutSystems
[OutSystems Style Guide] Discussion
Mário Araújo
Rank: #9
Posted on 2010-02-19
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
cheat sheets.zip
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
Rui Barbosa
Rank: #121
Posted on 2010-04-19
thumbs_up_ico
1
thumbs_down_ico
0
reply
post_link_ico
template_SampleData.zip
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
Paulo Tavares
Rank: #4
Posted on 2010-04-20
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
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
Robert Chanphakeo
Rank: #7
Posted on 2010-04-21
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
@
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).
Paulo Tavares
Rank: #4
Posted on 2010-04-21
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
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
Robert Chanphakeo
Rank: #7
Posted on 2010-04-21
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
@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! :)
Daniel Lourenço
Rank: #17
Posted on 2010-06-21
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
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:
Style Guide, level 1
training video
– explains the concept of the OutSystems Style Guide;
Style Guide, level 2
training video
– explains how to create a new application using the OutSystems Style Guide;
OutSystems 2.0
training videos
– explains several of advanced web patterns that are available in the OutSystems Style Guide;
OutSystems Style Guide
component page
–
in the component page you can read a list of the OutSystems Style Guide functionalities and download it to start developing your applications.
Daniel Lourenço
Rank: #17
Posted on 2010-08-04
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
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
Joao Heleno
Rank: #111
Posted on 2010-08-04
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
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.
Evert van der Zalm
Rank: #32
Posted on 2010-08-19
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
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
Daniel Lourenço
Rank: #17
Posted on 2010-08-19
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
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
Daniel Lourenço
Rank: #17
Posted on 2010-08-19
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
@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
Evert van der Zalm
Rank: #32
Posted on 2010-08-19
thumbs_up_ico
0
thumbs_down_ico
0
reply
post_link_ico
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
Quick Reply
Notify me by email when someone answers to my post
attachment
Choose File
No file chosen
Submit
Login to reply
Something on your mind?
Login to Start a Discussion
Top Forums Posters
Gonçalo Martins
Ricardo Silva
Charles Colaço
Richard Pearson
Davide Marquês
Statler & Waldorf
Justin James
David Chen
JD
Robert Chanphakeo
See leaderboard
Online Training
On-demand video lessons to help you learn at your own pace.
Learn More