Simple Resource Viewer

Stable version 1.0.1 (Compatible with OutSystems 11)
Published on 23 April 2020 by 
 (3 ratings)

Simple Resource Viewer


Input Parameters

Header Config

StartDate and EndDate  (1) are mandatory to set the days interval.

FormatDate (2) is using the built-in OutSystems function FormatDateTime to show the day on the header and FormatDay (3) is for the label of the weekday and could be set to an empty string "" to hide and use only the date.

ResourcesTitle (4) is to set the first column title above the resources list. 

ExtendedClass is to add a class on SimpleResourceViewer Widget main container to help customize some styles.

* The panel "Init Parameters" it is just for debugging in realtime on Demo Project

Resource List and Dates

This widget needs 2 main data lists:

  • Resources (5): This is the main structure of this component and print your values in the same order on the left side of the viewer (first column)
    • Id (Long Integer): Could be any unique identifier to bind with the date list's ResourceID
    • Label (Text): To be shown on the left side/first column
    • Color (Text): Use hexadecimal value (e.g.: #ffffff) to print the entire row with that color (the green example on the previous image)
    • isBold (Boolean): To print Label with bold style
    • isCategory (Boolean): It is like a divider on the rows, like the previous example with "Category Example" on the first line. No dates (blue boxes) are printed to this type of resource.
  • Dates (6): This will print the blue box marking the days of each resource
    • ResourceID (Long Integer): The unique identifier that binds this date with a Resource from the previous list
    • Date: The date to be printed on the widget (blue boxes)

Other Config

You can also enable the Add Button with the parameter ShowAddButton (7)

Or even choose which action will be triggered when a date is clicked (blue box) with the parameter ActionOnClick (8) with 0 for none action, 1 for delete action and 2 for view action. Those actions trigger an event.

* The panel "Init Parameters" it is just for debugging in realtime on Demo Project

You can also set the DaysColumnWidth (10) or ResourceColumnWidth (9) to better fit your style's project.

* The panel "Init Parameters" it is just for debugging in realtime on Demo Project


All of those events are triggered but not mandatory. In my demo, I use some examples showing a feedback message or popup do view the content that was clicked. There is an extra event, the ViewCalendarDate (13) that is when you click on the header's date and you can use it as a filter or redirect user to another screen, for instance.