Image Card React Widget

Stable Version 1.0.0 (Compatible with OutSystems 11)
Published on 15 April 2020 by 
 (1 rating)

Image Card React Widget


Usage - Short Version

   1. Add ImageCardWidget_CW as a dependecy to your project.
   2. Add Image Card to your desired screen(s), usually inside a Gallery.
   3. Set the values of Name, Description and BackgroundImage, usually to [Source].List.Current.[Attribute]
   4. Optionally right click Image Card to link it to an action

Usage - Detailed Version

- Under Manage Dependencies, choose ImageCardWidgets_CW and consume ImageCard
- Open Desired Screen in your project. A common scenario for a list is to place an Image Card inside a Gallery. To do this, add a Gallery Widget onto the screen in the desired location
- From UI Flows - MainFlow - ImageCardWidgets_CW - ImageCardWidgets, drag the widget onto the screen inside the gallery or your desired location.
- Set values for Name, Description, and BackgroundImage.  In the case of a Gallery or other list this will be attributes from your entity [Source].List.Current.[Attribute]
- [Optional] To have the image card link to another Screen or Action, Right click Image Card and choose 'Link to' and choose your option
- [Optional] Set the title color by updating the CSS class .image-card-title-container.
- [Optional] Set the description color by updating the CSS class .image-card-description-container.