DocSF

DocSF

Did You Know?

Advanced visual search system powered by Ajax

Appunti SalesForce Web Components

Il giorno 08 Gennaio 2018 ho modificato il mio primo web component

Analizziamo il contenuto

<!-- myComponent.html -->
<template>

    <lightning-card title={ciao} icon-name="action:goal">
        <div class="slds-m-around_medium">
            {ciao}, {greeting}!
        </div>

        <c-view-source source="lwc/hello" slot="footer">
            Bind an HTML element to a component property. Ceck
        </c-view-source>

    </lightning-card>

</template>

il tag template è un tag paragonabile al body di html. Deve essere presente in tutti i web components.

I commenti vengono scritti come in html

lightning-card è un componente. Lista dei componenti lightning disponibile all’indirizzo https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example

Sostituire per i componenti il separatore : con il –

I componenti aura e quelli LWC possono coesistere insieme

L’attributo icon-name genera una icona. La lista delle icone è disponibile alla url https://www.lightningdesignsystem.com/icons/#action

Le classi css usate sono di Lightning Design System. Lista disponibile qui https://www.lightningdesignsystem.com/utilities/margin/

import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {
    ciao = 'Finalmente';
    greeting = 'World la mia prima modifica a un LWC';

    // funzione richiamata da html
    handleBtnClick() {
        window.open('https://www.picchiri.com','_blank');
    }
}

Il js sopra descritto è il controller della nostra pagina html o web component

Configurazione CLI

Creazione nuovo progetto LWC

Creazione di un LWC Lightning Web Component con Visual Studio Code

Configurazione principale Lightning Web Component (LWC)

Related Post

Come passare i dati da App Field Service a Ap

Se hai bisogno di portare l'utente dalla App Field Serv...

Salesforce lightning component passare una li

Procedere come segue: Passare al controller javascri...

LWC: Funzioni base

Trailhead Qui dentro trovi informazioni su: @api ...