How to add a FlexCard conditionally on a lightning page

FlexiPage/Lightning record page is a type of customizable page layout that allows users to create dynamic, interactive, and responsive pages that can be tailored to meet specific business needs. FlexiPages are used to create custom page layouts for various objects in Salesforce.

Let's see how we can add a FlexCard on a lightning page to display it conditionally:

1. Create your FlexCard component.

2. Open FlexiPage/Lightning record page on which the new FlexCard component needs to be added. Search for the new FlexCard under the Components tab on the left side. Drag and Drop the FlexCard component onto the desired region on the page.

Here, we have added our FlexCard in the top right corner.

3. Click on the newly added FlexCard component. You will notice the “Set Component Visibility” setting in the right side window. Click on “Add Filter” to add the condition to display the FlexCard component conditionally.

We can add any condition based on the requirement under the component’s “Add Filter” action.

We can use the “Record” field on the filter to specify which field on the object we want to filter by. In the example above, we are filtering by the record’s record type name.

The "Device" option on the filter allows us to specify which device the filter should apply to. This is useful when we have a FlexiPage designed to be responsive and accessible on different types of devices, such as desktops, tablets, and smartphones. By default, the filters are visible on all devices.

The "Advanced" option on the filter allows us to create more complex filter criteria using logical operators, such as AND and OR.

Based on the requirement we can choose the options appropriately.