Beginner’s guide to OutSystems that enables Digital Transformation to Businesses with enterprise-grade applications – Part 2
In this blog, we are going to learn more about the four tabs that ensure we build our applications in the fastest way.
In the below image you are seeing inside the module we just created, this is the environment for full stack development.
Four tabs on the right side.
Processes
Processes in Outsystems represent the flow of activities and logic that define a business process or workflow. Processes are designed using a visual process modeler tool, which provides a drag-and-drop interface for defining process activities, transitions, decision points, automated tasks, error-handling mechanisms during execution, and integration points with other systems or services.
Timers: Timers are used to schedule and execute time-based actions within applications that need to be performed automatically at specific intervals without requiring manual intervention.
Use cases: Timers are commonly used for implementing scheduled jobs, batch processing, data synchronization, sending notifications, invoking server actions, cache refresh, report generation, and time-sensitive operations within an application.
Configuration: We can configure timers using the Timer element in Outsystems Service Studio, we can define the timer’s properties such as frequency, start time, recurrence pattern, and logic.
Error Handling: Built-in logging and error handling mechanism in Outsystems capture execution logs to track errors or exceptions to take appropriate actions in case of failures. This ensures the reliability of timer-based processes.
Monitor and Manage: Timers can be monitored and managed through the Service Center environment. We can view active timers, track execution history, and configure timer settings.
Interface Tab
The interface tab is where you design and customize the user interfaces (UI) of your applications using the visual interface builder tool. You can create web and mobile UIs using a drag-and-drop approach.
By right clicking on “Mainflow” you can Add screen, Block, Email, External site and other operations required as shown in the below image.
As shown in the below image you can create a new screen or use the pre-built screen templates as related to the nature of the application you are going to create.
When creating screen type name for the screen, you can also click “Include in menu” to see the screen in the menu tab of the application for effortless navigation.
When creating sca reen, you are defining the primary user interface screens or pages that the user interacts with when using the application. For a screen, there will be elements and a widget tree.
领英推荐
Interface Elements
Visual Design: Designing layouts and components of your screen using Outsystems Visual interface builder. This involves dragging and dropping UI elements such as buttons, input fields, labels and containers onto the screen canvas.
Properties: You can configure various properties of the screen, such as its name, title, description, icon, event handler and Style sheet for CSS code. We can give access to the screen role-based, two default
roles provided anonymous and registered, roles can also be customized that will appear in the properties tab.
Logic, Navigation: The screen functionality can be defined by adding client-side and server-side logic using event handlers, data validations, data retrieval from database and external sources and Business logic process.
UI elements: Binding the UI elements on the screen to data sources, such as entity attributes, variables, parameter or web services to display content and interact seamlessly with data stored in backend within the user interface.
Screen Lifecycle: Screen preparation logic can be implemented to initialize the screen state and fetch any necessary data or resources before the screen is rendered to the user. To ensure the screen loads efficiently and displays up-to-date information to the user.
Testing, Debugging and Deployment: Screens can be manually or automatically tested and debugging tools are provided by Outsystems to ensure its functions meet the user experience standards. Once the screen design and functionality are satisfied, you deploy the screen along with the rest of your application to a runtime environment for production use. Outsystems handles deployment process automatically, ensuring that your screens are available to users as part of the deployed application.
Images Folder
When you right click on the images folder. Images can be imported, dependency can be taken and reused from other modules.
Themes folder
You can add theme which is a CSS code written in this CSS style sheet, dependency can be taken means themes CSS code written in other modules can be reused.
Themes properties: Name, description can be given to the created theme. Theme added can be set to public “Yes” to be reused across other modules. Base theme OutsystemsUI pre-built theme is available across modules, in the style sheet we can add more styles, Grid type, columns, width and Blocks can be edited to our requirement.
Widget tree
Widget tree organizes UI components in a hierarchical manner, with parent-child relationships representing the containment and nesting of elements within each other. This hierarchy reflects the layout and composition of the UI on the screen. Developers can interact with the widget Tree using a drag-and-drop interface to rearrange, reorder, or nest UI Components as needed. This allows for easy manipulation and organization of the UI Structure to achieve the desired layout and design.
Widget tree displays information about the visibility and accessibility settings of each UI component, indicating whether the component is currently visible on the screen and whether it's accessible to end users based on conditional logic or permissions.
Widgets are available on the left side of the screen. Various widgets exist to make the application development bit faster by dragging-and -dropping the widgets into the screen.
Properties and Styles:
Every widget used in widget tree has its own properties name, variables linked to the widget, Prompt, Data type, whether the widget must be visible, and it style classes, event handlers, attributes property and its value and many more properties for the respective widgets.
Continuation in part -3 of this blog.
We will look into the logic and Data tab.