Widgets
Conditional

Conditional widget

Conditional widget allows developers to conditionally render UI elements based on specified conditions, enhancing dynamic content display and personalized user experiences within the app.

Properties

PropertyTypeDescription
conditionsarrayAllow users to conditionally render their widgets using if, elseif and else statements

Example Conditional widget is very useful specially when making a custom widget where users might want to have a default value and an optional value. Let us take an example for its use case

Consider that you are trying to make a custom widget or Button for dealing with social logins, since there are more than on platforms like Meta, Google, Apple etc so choosing an image based on provider variable is a viable choice. But how can we check if provider is apple or google etc ?

Steps

  • First of all declare the base custom widget yaml code. Then use Conditional to render Image widget accordingly.

Code

Widget:
  inputs:
    - provider
    - label
  onLoad: |
    //@code
 
    console.log(provider);
    console.log(label);
 
    function capitalizeString(str) {
      return str.charAt(0).toUpperCase() + str.substring(1) ;
    }
 
    if (label.length > 0 )
      providerText.text = label;
    else
      providerText.text = "Sign In With " + capitalizeString(provider);
 
  body:
    Stack:
      styles:
        alignChildren: centerLeft
      children:
        - Conditional:
            conditions:
              - if: ${provider === 'apple' || provider === 'Apple' }
                Image:
                  source: https://firebasestorage.googleapis.com/v0/b/ensemble-web-studio.appspot.com/o/custom_widgets_assets%2Fsocial_login%2Fapple.png?alt=media&token=893491f0-5300-4b29-8fce-30fe98eaec76
                  styles:
                    height: 24
                    width: 24
                    padding: 0 24
              - elseif: ${provider === 'google' || provider === 'Google' }
                Image:
                  source: https://firebasestorage.googleapis.com/v0/b/ensemble-web-studio.appspot.com/o/custom_widgets_assets%2Fsocial_login%2Fgoogle.png?alt=media&token=c91b1a27-a0bd-40c2-b82d-0f250762bc0b
                  styles:
                    height: 24
                    width: 24
                    padding: 0 24
 
        - Row:
            id: rowId
            styles:
              borderColor: 0xFFDEDED4
              crossAxis: center
              mainAxis: center
              borderRadius: 8
              height: 50
            children:
              - Text:
                  id: providerText
                  styles:
                    textStyle:
                      fontSize: 12
ColumnConfirmation Input