While Fonteva supplies you with a base list of Components to use when building your Lightning Events, you can create custom Components.

Building the Interface

Before you create your custom Component, Fonteva requires you to implement two specific interfaces. This interface will supply the base set of attributes you will need to set up your custom Component. Use the code provided below to get started.

  • LTE:EventInterface - This provides the base set of Components you can use when setting up your Lightning Event. Access must be set to global.

    LTE:EventInterface

    <aura:component description="EventCustomHTML" access="global" implements="LTE:EventInterface">
    <aura:if isTrue="{!and(v.componentObj != null,v.componentObj.config != null,v.componentObj.config.html != null)}">
        <div class="fonteva-event-component">
            <div class="slds-grid slds-grid--vertical slds-p-horizontal--medium">
                <ui:outputRichText value="{!v.componentObj.config.html}" linkify="true" class="event-rich-text"/>
            </div>
        </div>
    </aura:if>
</aura:component>
    XML

  • EventApi:EditLightningCompInterface - This allows you the capability to edit your custom Component.  Access to this Component must be global. 

    EventApi:EditLightnigCompInterface

    <aura:component description="EventCustomHTMLEdit" access="global" implements="EventApi:EditLightingCompInterface">
    <aura:method name="validate" action="{!c.validate}" access="global"/>
    <Framework:InputFields aura:id="html"
                             label="Custom HTML"
                             isRequired="true"
                             value="{!v.pageComponent}"
                             fieldType="richtext"/>
</aura:component>
    XML

    Once this interface is implemented, you will need to provide Fonteva with the Aura method validate. This allows you to make changes to the pageComponent object. Those changes are passed through to your Fonteva app automatically.

    validate

    ({
    validate : function(component) {
        component.find('html').validate();
        component.set('v.validated',component.find('html').get('v.validated'));
    }
})
    JS

See EventInterface for more information.

Registering the Component with Salesforce

Once you've implemented the interface, you must register the Component in Salesforce.

To register the Component in Salesforce from your Org's home screen:

  1. [Click] 
    to access the Setup screen.
  2. [Select] Custom Code from the sidebar on the left side of your window.
  3. A list of items expands. [Select] Custom Metadata Types from that list.
  4.  A list displays. Find Lightning Event Component and [click] Manage Records.
  5. The base list of Fonteva provided Components displays. [Click] 
    .

  6. [Enter] the following information:
    • Lightning Component API Name - The Component name displayed in the code
    • Label - The Component name displayed in the UI
    • Lightning Event Component Name - this is the Salesforce designation. This field populates automatically once the Label is entered.
  7. If you release protected metadata records in a managed package, you can restrict access by clicking the Protected Component select box.
  8. [Click] the Is Enabled select box to enable your component.
  9. To complete the configuration, [click] either 
     or 
    to finalize registration.


Enabling Edit Functionality

If you enabled the Edit functionality when building the interface, an additional field displays on the Lightning Event Component Edit screen. The Edit Lightning Component API Name is not required. However, you need to add a value in order to enable editing functionality on your custom Component.

See https://fonteva.atlassian.net/wiki/spaces/userguide/pages/854240318 for more information on adding your Component to your Lightning Event.