Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

BlankSlate

  • Edit
  • Content on the screen to show end users that there is no data available for display.

    Use BlankSlate to inform end users when they start using the application, complete a task or when there is no data available for display.

    How to use

    Drag the pattern to the screen and edit the content as per your requirements.

    1. Drag the BlankSlate pattern into the preview.
    2. Set the content you need in the placeholder.
    3. Publish and test.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    Position Set the position around the widget element. PositionExtended Identifier False Entities.PositionExtended.Center
    ExtendedClass Add custom style classes to this Block. Text False none

    Layout and Classes

    CSS Selectors

    Element CSS Class Description
    .blank-slate .bottom-center Vertically aligns the content to Bottom and Horizontally align it to Center.
    .blank-slate .bottom-left Vertically aligns the content to Bottom and Horizontally align it to Left.
    .blank-slate .bottom-right Vertically aligns the content to Bottom and Horizontally align it to Right.
    .blank-slate .center Vertically aligns the content to Center and Horizontally align it to Center.
    .blank-slate .center-left Vertically aligns the content to Center and Horizontally align it to Left.
    .blank-slate .center-right Vertically aligns the content to Center and Horizontally align it to Right.
    .blank-slate .top-center Vertically aligns the content to Top and Horizontally align it to Center.
    .blank-slate .top-left Vertically aligns the content to Top and Horizontally align it to Left.
    .blank-slate .top-right Vertically aligns the content to Top and Horizontally align it to Right.

    Advanced Use Case

    Show the BlankSlate Pattern when the list is empty

    1. Drag the If Widget and enter the Empty runtime property in the condition.

    2. Inside the True branch of the condition, use the BlankSlate Pattern.

    3. Inside the False branch of the condition, use your list.

    • Was this article helpful?