Add an alert to a Lightning record page

On Lightning pages, the Playground shows Avonni components as Dynamic Components. A Dynamic Component is built in the Avonni Dynamic Components builder from elements such as Alert, Rating or Metric, and a single Lightning App Builder component, AX - Dynamic Component, displays it on App, Record and Home pages. This tutorial builds an alert that warns users that a patient’s consent form is missing, then adds it to a record page.

Before you start, install Avonni Experience Components in your org. Dynamic Components also ship alone in the Avonni Dynamic Component package, with the same component and custom metadata type under the namespace avdynamic: if that is the package you have, replace avxp with avdynamic in the snippets below. Users who open the page need access to the package’s Apex classes, which the Avonni Dynamic Components User permission set grants.

1. Create the Dynamic Component

Each version of a Dynamic Component is stored as a record of the custom metadata type Avonni Dynamic Component (avxp__AvonniDynamicComponent__mdt). Only the version whose status is Active can be selected on a page and rendered. Create it in one of two ways:

• In the Avonni builder. Create a Dynamic Component, add an Alert element and set Variant to error, Icon Name to utility:error and Content to the message. Leave Is Dismissible off so the alert stays visible until the problem is fixed. Save the version as Active; activating a version deactivates the previous active one.
• From the Playground. The Code tab of the example gives the custom metadata record. It is version 1 of the component, already Active. Add it to your project under force-app/main/default/customMetadata/, deploy it, and it opens in the Avonni builder like any other version.

<?xml version="1.0" encoding="UTF-8"?>
<CustomMetadata xmlns="http://soap.sforce.com/2006/04/metadata" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
    <label>Playground AlertMissingPa e626</label>
    <protected>false</protected>
    <values>
        <field>avxp__DynamicComponentName__c</field>
        <value xsi:type="xsd:string">Playground_AlertMissingPa_e626</value>
    </values>
    <values>
        <field>avxp__Interactions__c</field>
        <value xsi:type="xsd:string">{&quot;onLoad&quot;:[]}</value>
    </values>
    <values>
        <field>avxp__IsLastModified__c</field>
        <value xsi:type="xsd:boolean">true</value>
    </values>
    <values>
        <field>avxp__Queries__c</field>
        <value xsi:type="xsd:string">[]</value>
    </values>
    <values>
        <field>avxp__Resources__c</field>
        <value xsi:type="xsd:string">[]</value>
    </values>
    <values>
        <field>avxp__Status__c</field>
        <value xsi:type="xsd:string">Active</value>
    </values>
    <values>
        <field>avxp__StyleClasses__c</field>
        <value xsi:type="xsd:string">{}</value>
    </values>
    <values>
        <field>avxp__Value__c</field>
        <value xsi:type="xsd:string">[{&quot;id&quot;:&quot;a7fcb8c7-7854-4d21-8197-4b4cac909f44&quot;,&quot;name&quot;:&quot;dcAlert&quot;,&quot;apiName&quot;:&quot;Alert1&quot;,&quot;value&quot;:{&quot;content&quot;:&quot;&lt;p&gt;&lt;strong&gt;Consent form missing.&lt;/strong&gt; Collect patient consent before scheduling the procedure.&lt;/p&gt;&quot;,&quot;iconName&quot;:&quot;utility:error&quot;,&quot;iconSize&quot;:&quot;small&quot;,&quot;variant&quot;:&quot;error&quot;}}]</value>
    </values>
    <values>
        <field>avxp__VersionNumber__c</field>
        <value xsi:type="xsd:double">1.0</value>
    </values>
</CustomMetadata>

The Code tab names the component after the example, Playground_AlertMissingPa_e626. You can rename it: change DynamicComponentName__c, the label and the file name (<Name>_1.md-meta.xml), and use the new name on the page. If your org already has a Dynamic Component with that name, the deploy replaces its version 1, and another active version of it would still be the one that renders: pick a new name, or deactivate the other version in the builder.

2. Add it to the record page

Deploy the custom metadata record before the page: the page can only reference an active Dynamic Component.

1. Open a record of the object the page is for, click the gear icon, then Edit Page.
2. In the Components panel, find AX - Dynamic Component under Custom - Managed, or type Dynamic in the search box.
3. Drag it onto the region where it should appear, usually above the record details.
4. In the properties panel, pick the component in Component Name (the list shows active Dynamic Components) and turn on Display as Card to give it a white card background.
5. To show the alert only when it applies, add a filter under Set Component Visibility, for example when the consent field of the record is empty.
6. Click Save, then Activate to assign the page as the org default, or to specific apps, record types and profiles.

The Code tab of the example shows the component as it appears in the page metadata:

<itemInstances>
    <componentInstance>
        <componentInstanceProperties>
            <name>displayAsCard</name>
            <value>true</value>
        </componentInstanceProperties>
        <componentInstanceProperties>
            <name>name</name>
            <value>Playground_AlertMissingPa_e626</value>
        </componentInstanceProperties>
        <componentName>avxp:dynamicComponent</componentName>
        <identifier>avxp_dynamicComponent</identifier>
    </componentInstance>
</itemInstances>

To change the alert later, edit the Dynamic Component in the Avonni builder and activate the new version: every page that shows it picks up the change, with no page edit.