Use ‘Exposed Attributes’ to configure action labels dynamically

With Exposed Attributes, we can dynamically configure action labels, action visibility, and

conditional styling in Flexcard.

Let’s take a look at them below:

1) To configure the action label and text contents dynamically:

‘Exposed Attributes’ allow us to configure the action (button) labels directly from the App Builder or Experience Builder based on the need.

In the below example, an exposed attribute ‘DynamicButtonName’ of type ‘String’ is created with the default value "View record” in the ‘Exposed API’ modal.

In the label of the ‘Action’ properties, the exposed attribute is accessed as {Session.DynamicButtonName}

And another exposed attribute, ‘Content’ of type ‘String’ is created without filling in the default value.

Similarly, the exposed attribute is accessed as {Session.Content} in a text element.

Now activate the flexcard and go to the flexipage.

In the ‘Enter your preferred Navigation term’ field, we can enter any navigation term based on the need to replace the default value ‘View Record’ set for the action label in the UI.

Additionally, for the ‘String type’ exposed attributes, we can also use custom labels in the format "{!$Label.customLabelName}". Here, our custom label name is ‘testLabel’ and it is entered as ‘{!$Label.testLabel}’ in the ‘Content’ field.

Now you can see the modified contents of the Flexcard as below.

• Action label is displayed as ‘Navigate’.

• Text element shows the contents of the custom label mentioned.

2) To configure the visibility of an action (button):

With ‘Exposed Attributes’, we can conditionally show or hide an action by configuring it directly from the App Builder or Experience Builder based on the need.

In the below example, an exposed attribute ‘HideButton’ of type ‘Boolean’ is created with the default value "false" in the ‘Exposed API’ modal.

An action (button) with the label ‘View All’ is created, and in the ‘Conditions’ section of the ‘Action Properties’, a condition is added as ‘Session.HideButton = false’.

NOTE: The format for accessing the exposed variable in the ‘Conditions’ section is ‘Session.AttributeName’. We shouldn’t be using “{}” along with Session.AttributeName like we did in the earlier cases.

After activating the flexcard, you can observe that the ‘View All’ button is displayed in the UI.

Now go to the Flexipage, and you can observe that the ‘Do you want to hide the ‘View All’ button?’ checkbox is unchecked by default.

When you check the checkbox and observe the UI, the ‘View All’ button will be hidden.

3) To configure the conditional styling for elements:

Similarly, we can use ‘Exposed Attributes’ to dynamically configure the conditional styling for flexcard elements from the App Builder or Experience Builder.

In the below example, an exposed attribute ‘BorderColor’ of type ‘String’ is created without filling in the default value in the ‘Exposed API’ modal.

Now from the block element’s Style tab, click the ‘Add Conditional Style’ button and add conditions to display different colors based on the ‘exposed attribute’ value.

Here, a conditional style named ‘BlackBorder’ is created with the condition "Session.BorderColor = Black”.

Similarly, conditional styles are created for green and blue color borders as well.

Activate the flexcard and observe that it is displayed with the default ‘gray’ color border in the UI.

Now you can configure the border color as per your needs from the Flexipage.

If the value entered is ‘blue’, then a blue color border is displayed for the block.

Similarly, ‘green’ and ‘black’ color borders are displayed for the block when the respective colors are entered in the Flexipage’s field.

References:

https://help.salesforce.com/s/articleView?id=sf.os_create_a_public_property_for_a_flexcard_lwc_in_the_flexcard_designer_41483.htm&type=5