search

rodriggj / saleforce_dev

0 stars 0 forks source link

readme

Salesforce Development

Content

  1. Lightning Web Components

Salesforce Org Setup

Setting up the Development Environment

1. Sign Up for Salesforce Developer Org here

username: rodriggj@provar.com

password: T@****!

url: https://provar-b6-dev-ed.my.salesforce.com

Back To Top

2. Setup Salesforce DX Environment

  1. Install Visual Studio Code

    • [ ] Installation instructions for your platform can be found here

  2. Install Salesforce CLI

    • [ ] Installation instruction for your platform can be found here

    • [ ] In a terminal session validate installation by running 

    sfdx
    • [ ] validate plugin installation also by running 
    sfdx plugins --core

  3. Install Extensions in Visual Studio Code

    • [ ] On the left-hand navbar will be a button labeled Extensions
    • [ ] Use the the Search feature to query for Salesforce Extension Pack and install top hit

NOTE: In Visual Studio Code to initiate an integrated terminal session on a Mac type Ctrl + ~. When the terminal session comes up validate that you can execute commands like sfdx. If you CANNOT you may need to configure your ENV PATH to point to the sfdx download binaries.

Back To Top

3. Set up My Domain and Dev Hub

  1. Navigate to your developer org login screen which you can access from login.salesforce.com, enter login credentials.

  2. When the page redirects to the Setup screen. In the left-nav bar at the top is a Search function. Enter domains. Select My Domain from the returned list of values.

  3. You must enter a globally unique domain value. Enter a value unique to you and Check Availability. Keep Trying till you find one.

I entered line-blend-skis as my unique string, which was available and with some additional input from Salesforce my new domain became line-blend-skis-dev-ed.my.salesforce.com

  1. You will need to wait for Salesforce to Provision you new Domain. You will know that it is provisioned with the receipt of an email message from Salesforce. When you do receive this notice you can complete the last step which is to Deploy your new Domain to Users. This will be a button that will display and you can click this button.

  2. You will be redirected to the login screen login.salesforce.com. Enter your credentials and you should be logged in to the Org with the URL as the new domain.

Back To Top

4. Set up a Project and DevHub Developer Documentation

  1. Go to Visual Studio Code, and in the terminal we want to create a new project. 
sfdx force:project:create -n "learning_org"

Note: -n is the name flag

  1. Now we need to associate our project structure with a Dev Hub. To do this we can execute the following command
sfdx force:auth:web:login -a rodrizzledevhub -d

Note: -a flag is an alias flag, where you will assign a name to the DevHub. The -d flag will set this DevHub as default. When you execute this command you will be redirected to the front-end SFDC UI. Here you will be asked for your login credentials, possibly a verification code, and verification that the user is allowed to access the Salesforce application via the CLI tooling, SFDX.

  1. Now within the project directory structure we need to modify the configuration of our project so we can create a scratch org with some data populated in the Org we create. To do this
    • [ ] Open the file found at config/project-scratch-def.json in your code editor
    • [ ] Below the features node in the json file, add another node (aka key:value pair) like this...
"hasSampleData": true,
  1. Before you receive a You do not have access ... error, make sure that before you execute any commands using the CLI to create a scratch org, that you enable the ability to do so in the Salesforce UI.
    • [ ] In your Salesforce Org, nav to Setup
    • [ ] Query the Search function for Dev Hub
    • [ ] By default the Enable Dev Hub option is Disabled, you need to enable this functionality

  1. Now we are ready to create a Scratch Org. Within the DevHub we may have multiple Scratch Orgs. To create a Scratch Org we will execute the following command. 
sfdx force:org:create -a lwcScratchOrg -d 30 -f config/project-scratch-def.json -s

Note: Explanation of the above command...

In this command the -a flag still stands for alias so we assign this scratch org a name of _lwsScratchOrg.

The -d flag DOES NOT mean default in this case, but rather days or duration (in days). The SFDC platform allows a scratch org to exist from 1 - 30 days, after the 30 day limit the scratch org will be deleted. So in this case we are setting a maximum duration of 30 days.

We use the -f flag to specify the file that is the configuration specification for our Scratch Org. This was the project-scratch-def.json file. To refer to this file we need to specify the path to this file which, if we are in the root directory will simply be config/project-scratch-def.json.

Finally, we need to tell Salesforce that we want to use the same user rodriggj@provar.com that set up the org, so we use the -s flag to specify same default username.

A successful result will render an image similar to the following, with a Scratch Org ID, and UserName defined.

  1. Now that the Scratch Org has been created you can open the Scratch Org from the terminal with the following command. This command will redirect you back to the salesforce UI where you can verify you have a new Org by the domain in the URL will be new -- this is the domain of the Scratch Org.
sfdx force:org:open

NOTE: If you want to see what all the available commands in are from the CLI you can see the help documenation by typing sfdx commands in the terminal.

Back To Top

Lightning Web Components Fundamentals

  1. Navigate to the lwc directory within the folder structure of the Project you created.
cd learning_org/force-app/main/default/lwc
  1. Create the lwc component with the CLI
sfdx force:lightning:component:create --type lwc -n helloWorld

Back To Top

LWC Folder Structure

App Creation and Component Deployment

  1. Go to your scratch org that you created via the URL that was generated during the CLI command. If you closed out of that org, you can reopen by executing the following command: 
sfdx force:org:open

  1. In the Setup screen, use the Search filter and query for App Manager. Click New Lightning App and advance through the wizard. You Do Not need to add any Navigation Items. Also, when presented with the option to add User Profiles you Only Need System Administrator role for now.

  2. Now that you've created the Application, you will now need to add Pages to the application. By default your application will not have any. To do this go back to Setup and in the Search bar type Lightning App Builder

  3. Navigate through the wizard.

Back To Top

Markup our LWC

  1. Go back to project structure in VS code. Open the lwc > helloWorld > helloWorld.html file. In this file between the <template> </template> tags copy/paste the following code, and save and close this file. 
<template>
    <div style="border: 1px solid red;">
        <p>Hello World</p>
        <p>This is the hellow world component that we built in our Project Structure.</p>
        <button>Push Me!</button>
    </div>
</template>
  1. What we just did is provide some markup to the LWC so on the UI you can see a visual representation of our component. Now we need to tell Salesforce to that this component is available for use. To do this we need to modify our helloWorld.js-meta-xml file. Open this file and copy / paste the following code:
<!-- Was -->
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

<!-- Change to -->
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>
  1. Now that we have the component, specified a target where the component can be used, we need to push this to Salesforce so it becomes available for salesforce to use. In the terminal, enter the following command: 
sfdx force:source:push

Note: Once you've pushed the changes to the Salesforce Scratch Org, you should see the Custom Component become available to you for use in the UI. If the UI was already opened prior to the sfdx force:source:push command you may have to click the Refresh button for the component to appear.

  1. Finally, we can drag and drop our component to our layout manager, click Save, and Navigate back to our Foobar Application and there it is ... your first LWC deployed.

Back To Top

Data Binding & Local Properties

  1. Right now in our LWC component it greets the user with a hardcoded message. But what if we want to make this a dynamic message. For example what if the message display's the user name. To do this we need to use 2 sets of files to accomplish a practice called data binding.

  1. To implement some data binding, start by opening the helloWorld.js file. In here we will set some local properties to our helloWorld class. 
// Was
import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {}

// Change to
import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    fullName = "Gabe Rodriguez"
    message = "I hope you have a wonderful day."
}
  1. Now nav to the helloWord.html file and implment the data binding
<template>
    <div style="border: 1px solid red;">
        <p>Hello {fullName}</p>
        <p>This is the hellow world component that we built in our Project Structure.</p>
        <p>{message}</p>
        <button>Push Me!</button>
    </div>
</template>

Back To Top

Two Way Data Binding

  1. So the above example still has the static input problem. Yes it dynamically passes data from the javascript file to the html file, but the input is still hardcoded. So how do we allow the user to input data in real-time and the html input update on the screen? To do this you need Two-Way Data Binding.

  1. Here we will modify the javascript to include a method. A method is simply code that provides some behavior to your application. In this case we want to change the screen input so we need a changeHandler method. In the method we will ask for some initiating activity called an event. The event in this case is the typing of new input into the screen. When we receive this event we will tell the html to update the screen value on the UI.

We will display a new message this time, where we are asking the user to input a course title. So in the javascript we need to add a title property to the class, and use it to store the value the user inputs. Modify your helloWorld.js file with the following code: 

// Was
import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    fullName = "Gabe Rodriguez"
    message = "I hope you have a wonderful day."
}

// Change to...
import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    fullName = "Gabe Rodriguez"
    message = "I hope you have a wonderful day."
    title = "aura"

    changeHandler(event){
        this.title = event.target.value
    }
}
  1. Now go to the helloWorld.html file. Here we need to modify the presentation of the UI with 2 new items. The first is an input field allowing the user to type in some new title of a course. The second is the sentence (string) that will display the input dynamically. In the file enter the following code...
<template>
    <div style="border: 1px solid red;">
        <label>Course Title</label><input type=text onkeyup={changeHandler}/>
        <hr>
        <div>Hello, {fullName} attending the {title} course.</div>
    </div>
</template>

Note: The fullName and the new property title are in the interpolation syntax { }, and will be read from the javascript changeHandler method or the properties in the Javascript class and passed to the html.

  1. Now push these changes back to the Scratch Org. 
sfdx force:source:push
  1. Go back to the Salesforce Scratch org and refresh and you should see the updates.

Back To Top

Lighting Web Component Library LWC Component Library

  1. So the styling of our component looks rough. This is why Salesforce provides a LWC library. In this library they have already built standard components that you can reuse by copy/pasting the code. To show you this ... instead of using our ugly Two-Way Data Binding form, lets us a Salesforce Card component.

Open a browser and search for Salesforce Lightning Component Library

  1. Once the Library opens, in the Quick Find Search bar, type Card. You will see a response in the left-nav-bar that says Components > lightning > card, select this element.

  2. The main portion of the page will render details of the Card component. In this component at the bottom you will see code, in the Lighting Mini Playground. Copy the code between the <template></template> tags, which should look like the code below. 

        <lightning-card  title="Hello">
            <lightning-button label="New" slot="actions"></lightning-button>
            <p class="slds-p-horizontal_small">Card Body (custom component)</p>
            <p slot="footer">Card Footer</p>
        </lightning-card>
  1. Go to your helloWorld.html file, and lets use this code with some modifications. We don't want the text that we saw in the Lighting Web Component library because it won't match our properties and we'll have to reconfigure our Two-Way-Data Binding. So let's do the following:
    • [ ] The body of the <lightning-card> </lightning-card> tags should be what we previously had with our input field and title, so copy your previous code and paste it between these 2 tags.
    • [ ] In the <lightning-card title="Hello"> change this to <lightning-card title="LWC Reuse Example">
    • [ ] Delete any previous code so your file looks like this. 
<template>
    <lightning-card  title="LWC Reuse Example">
        <label>Course Title:  </label><input type=text onkeyup={changeHandler}/>
        <hr>
        <div>Hello, {fullName} attending the {title} course.</div>
    </lightning-card>
</template>
  1. Redeploy the new component.
sfdx force:source:push
  1. Your new output looks a little more consistent with what you would ordinarily see on Salesforce layouts, and you reused what other developers have already done for you.

  1. You can see that the margins/padding are compressed in our card. For this we can utilize another library to help with our CSS styling, which can be found here Salesforce Design System. Again we can query for margin. There are multiple margin options, but we want the margin to be Around our entire card, so if you scroll down you will see Around, and we'll select the <div class="slds-m-around_x-small"></div> tag. We can go back and add this to our component like this and redeploy. 
<template>
    <lightning-card  title="LWC Reuse Example">
        <div class="slds-m-around_x-small">
            <label>Course Title:  </label><input type=text onkeyup={changeHandler}/>
            <hr>
            <div>Hello, {fullName} attending the {title} course.</div>
        </div>
    </lightning-card>
</template>
sfdx force:source:push
  1. You can continue to iterate on using these components for example you can use an input to add to you component. 
<template>
    <lightning-card  title="LWC Reuse Example">
        <div class="slds-m-around_x-small">
            <!-- <label>Course Title:  </label><input type=text onkeyup={changeHandler}/> -->
            <lightning-input type="text" label="Enter some text" placeholder="type here..." onkeyup={changeHandler} required></lightning-input>
            <hr>
            <div>Hello, {fullName} attending the {title} course.</div>
        </div>
    </lightning-card>
</template>

Here you see this one has embedded validation indicating that a mandatory field is now empty.

When you populate the field the error goes away and the text renders just like before.

Back To Top