Dynamic cards as actions

Cards have always been a preferred way of showing actions as they catch attention and act as a call out for the action. But why keep these actions static when you can make them dynamic too?
Checkout this read-to-use Appian Preset that is super simple to configure and use.

Below is the attached code for the above pre-set. Happy Lowcoding!

/*This code has been written by Harshit Bumb and taken from AppianSpace.com */
a!localVariables(
  local!columnsInARow: 4,
  local!configurations: {
    {
      icon: "cubes",
      title: "Manage Stock",
      description: "Manage your inventory in the system",
      
    },
    {
      icon: "dollar",
      title: "Manage Price",
      description: "Manage pricing of items you offer",
      
    },
    {
      icon: "users",
      title: "Manage Users",
      description: "Manage users within your organization",
      
    },
    {
      icon: "ad",
      title: "Manage Ads",
      description: "Manage advertisments across platforms",
      
    },
    {
      icon: "cogs",
      title: "More settings",
      description: "Access more settings of the system",
      
    }
  },
  local!numberOfRows: ceiling(
    count(local!configurations) / local!columnsInARow
  ),
  {
    a!forEach(
      items: enumerate(local!numberOfRows),
      expression: a!columnsLayout(
        columns: {
          a!forEach(
            items: index(
              local!configurations,
              enumerate(local!columnsInARow) + 1 + (fv!item * local!columnsInARow),
              null
            ),
            expression: a!columnLayout(
              contents: a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextIcon(
                        icon: fv!item.icon,
                        color: "ACCENT",
                        size: "LARGE"
                      ),
                      char(10),
                      a!richTextItem(text: fv!item.title, size: "MEDIUM"),
                      char(10),
                      a!richTextItem(
                        text: fv!item.description,
                        color: "SECONDARY",
                        size: "SMALL"
                      )
                    },
                    align: "CENTER"
                  )
                },
                link: a!dynamicLink(),
                /* • Replace dynamic link with any other link type*/
                height: "SHORT",
                showWhen: not(a!isNullOrEmpty(fv!item))
              ),
              
            )
          )
        }
      )
    )
  }
)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Built with WordPress.com.

Up ↑

%d bloggers like this: