Skip to Content (Press Enter)
OutSystems.com
Personal Edition
Community
Support
Training
Training
Online Training
Developer Schools
Boot Camps
Certifications
Tech Talks
Documentation
Documentation
Overview
ODC
O11
Forums
Forge
Get Involved
Get Involved
Jobs
Ideas
Members
Mentorship
User Groups
Platform
Platform
ODC
O11
Search in OutSystems
Log in
Get Started
Back to Forums
Mário Araújo
3
Views
12
Comments
[OutSystems Style Guide] Discussion
Question
Forge
OutSystems Style Guide (O11)
Forge asset by
OutSystems
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
cheat sheets.zip
Barbosa
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
template_SampleData.zip
Paulo Tavares
Staff
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
@
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" (
https://localhost/ServiceCenter/
) to display "Platform Server" information and "Recent items" (ie the right side panel).
Paulo Tavares
Staff
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
@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
Staff
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
Staff
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
João Heleno
MVP
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
MVP
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
Staff
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
Staff
@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
MVP
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
See the full guidelines
Loading...