How to create a custom UI widget in OutSystems with HTML/CSS extensions?

Creating a Custom UI Widget in OutSystems with HTML/CSS Extensions

Implementing custom UI widgets in OutSystems involves leveraging the platform's capabilities while extending its functionality with custom HTML and CSS. This comprehensive guide outlines the steps you need to create a custom widget to enhance your OutSystems applications.

Prerequisites

• An active OutSystems account with access to the development environment.
• Basic knowledge of OutSystems Reactive or Traditional Web app development.
• Familiarity with HTML, CSS, and optionally, JavaScript for extended functionalities.
• OutSystems Service Studio installed on your machine.

Understanding OutSystems Widgets

• OutSystems provides default widgets for common UI components.
• Custom widgets allow for more tailored and unique UI designs.
• HTML/CSS allows for customization beyond the standard properties available in Service Studio.

Setting Up Your Development Environment

• Log into OutSystems Service Studio.
• Create or open the project where you intend to add the custom widget.
• Decide whether your application will be Reactive or Traditional based on your requirements.

Creating the Custom Widget

• In Service Studio, navigate to the UI flow where you want to add the widget.
• Click the "Add" button to insert a new element.
• Select "Container" as the element type. This will serve as the wrapper for your custom HTML/CSS.
• Rename the container to something indicative of its purpose (e.g., "CustomWidgetContainer").

Adding HTML and CSS

• Inside the container, click to open its properties panel.
• Under "Advanced", switch to the "HTML" tab to add your custom HTML code.
• Example HTML snippet:

      <div class="my-widget">
        <p>This is my custom widget!</p>
      </div>
      

• Adjust the CSS properties to style your widget. Click on the widget, switch to the "Style" tab, and open the CSS editor.
• Example CSS snippet:

      .my-widget {
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        padding: 10px;
        font-size: 16px;
        text-align: center;
      }
      

Incorporating Dynamic Content with JavaScript (Optional)

• To add dynamic behaviors, introduce JavaScript within the HTML tab or use an "Expression" widget to execute JavaScript code.
• Ensure that any JavaScript you write is enclosed in script tags.
• Example JavaScript snippet:

      <script>
        document.querySelector('.my-widget p').innerText = 'Updated content from JavaScript!';
      </script>
      

• Make sure any attached JavaScript executes after the DOM element is available to manipulate.

Testing the Custom Widget

• Preview your application in Service Studio to ensure the widget appears and functions as expected.
• Test responsiveness and compatibility across different devices and screens.

Deploying Your Application

• Once you are satisfied with your custom widget, proceed to publish the application.
• Verify that the custom widget maintains its design and functionality in the deployed environment.
• Ensure adherence to organizational design standards and conduct accessibility tests.

By following these steps, you can successfully create and implement a custom UI widget in OutSystems with HTML/CSS extensions. This approach not only provides a greater degree of customization for your user interfaces but also allows you to integrate specific features that meet your application's needs.