Een Lightning Component maken

Laatst bijgewerkt : Aug 31, 2026 |
Prolog information
Metadata
Keywords:
Een Lightning Component maken voor het UI-doel voor screenpops en koppeling aan de Lightning Event die de vereiste gegevens ophaalt en voorbereidt.
Before you begin
Meld u aan bij Salesforce.
Zorg dat u al een Lightning Event hebt.
  1. Klik in het hoofdmenu van Salesforce in de hoek van het scherm op InstellenOntwikkelaarsconsole.
  2. Klik op BestandNieuwLightning Component.
    STEP RESULT:
    In Salesforce wordt het venster Nieuwe Lightning Bundle weergegeven.
  3. Typ in het veld Naam een naam voor de Lightning Component.
    ADDITIONAL INFORMATION:
    Typ bijvoorbeeld InteractionHandlerComponent.
  4. Typ in het veld Beschrijving een beschrijving voor de Lightning Component.
  5. Klik op Indienen.
  6. Verwijder de code uit de eerste en derde rij.
  7. Kopieer en plak de volgende code:
    ADDITIONAL INFORMATION: <aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="markedupText" type="String" />
    <aura:registerEvent name="avayaEvent" type="c:AvayaEvent"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    <aura:handler name="avayaEvent" action="{!c.handleAvayaEvent}"/>
    <article class="slds-card">
    <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
    <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-standard-contact">
    <lightning:icon iconName="standard:live_chat" size="small"/>
    </span>
    </div>
    <div class="slds-media__body">
    <h2><span class="slds-text-heading_small">Infinity Desktop Messages</span></h2>
    </div>
    </header>
    </div>
    <div class="slds-card__body">
    <div class="slds-size_2-of-2">
    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
    <div class="slds-align_absolute-center" style="min-height:100px; max-height:200px; overflow:auto;">
    <ui:outputRichText value="{!v.markedupText}" />
    </div>
    </div>
    </div>
    </div>
    </article>
    </aura:component>
  8. Klik in het zijvenster op Controller.
  9. Verwijder de code uit de eerste vijf rijen.
  10. Kopieer en plak de volgende code:
    ADDITIONAL INFORMATION: ({
    doInit: function(component, event, helper) {
    // const EXPECTED_ORIGIN = "example.origin.com";
    const EXPECTED_TARGET = window.location.origin;

    const newMessageHandler = function(message) {
    try {
    // 1. Ignore Lightning system iframe chatter
    if (!message || typeof message.data !== "string") {
    return;
    }

    // 2. Only process AvayaEvent payloads
    if (!message.data.includes("AvayaEvent")) {
    return;
    }

    // 3. Parse JSON safely
    let data;
    try {
    data = JSON.parse(message.data);
    } catch (e) {
    console.warn("Invalid JSON:", message.data);
    return;
    }

    // 4. Must be an AvayaEvent
    if (!data.lightningComponentName || data.lightningComponentName !== "InteractionHandlerComponent") {
    console.log("%cNot InteractionHandlerComponent", "color:DarkRed", data);
    return;
    }

    console.log("%cInteractionHandlerComponent Received Message", "color:green", data);

    // 5. Validate origin
    // if (message.origin !== EXPECTED_ORIGIN) {
    //     console.warn("%cInvalid Origin", "color:DarkRed",
    //         message.origin, data.origin
    //     );
    //     return;
    // }

    // 6. Validate target domain
    if (
    message.currentTarget.location.origin !== EXPECTED_TARGET
    ) {
    console.warn("%cInvalid Target", "color:DarkRed",
    message.currentTarget.location.origin, data.target
    );
    return;
    }

    // 7. Fire Aura event
    const avayaEvent = component.getEvent("avayaEvent");
    avayaEvent.setParams({ payload: data });
    avayaEvent.fire();

    console.log("%cNew AvayaEvent Fired", "color:Navy", data);

    } catch (e){
    console.error(e);
    }
    };

    window.addEventListener("message", newMessageHandler, false);
    component._handler = newMessageHandler;
    },


    handleAvayaEvent: function(component, event, helper) {
    console.log("UI Update Fired!");
    const data = event.getParam("payload");

    const pretty = "<pre>" + JSON.stringify(data, null, 2) + "</pre>";

    let buffer = component.get("v.markedupText") || "";
    buffer += "<br/>" + pretty;

    component.set("v.markedupText", buffer);
    }
    });
  11. Klik op BestandOpslaan.
    ADDITIONAL INFORMATION:
    Note:
    Voeg InteractionHandlerComponent toe aan dezelfde navigatiebalk als de hoofdapplicatie om wederzijdse communicatie mogelijk te maken.
Next Steps
Een workflow voor Lightning Component-screenpops maken.
Related information
Overzicht van Lightning Component-screenpop