Open Source Ecosystems

SFDC Hello NG app

Prerequisites

Saleforce Account - https://login.salesforce.com/?locale=in
Saleforce CLI - https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm
VSCode - https://code.visualstudio.com/download
VSCode extensions - https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components/set-up-visual-studio-code

Setup

Clone this repo
cd force-app/ngapp/hellong
npm install

Onetime setup

cd sfdc-hello-ng
sfdx force:auth:web:login -d -a ngapp
sfdx force:org:create -s -f config/project-scratch-def.json -a ngapp
Verify creation sfdx force:org:list
Update .forceignore and add **/ngapp to ignore bundling our source code

Deploy and test

sfdx force:source:push
sfdx force:org:open
Navigate to Setup > Platform tools > Custom Code > Lightning Components and here you should see the list of components that were deployed.
Open App Launcher > Sales
Setup > Edit Page
From the Left hand side Lightning Components, navigate to Custom section and Drag and Drop the required component on to the page. A preview of the app would be shown
Click on Save > Activate > Assign as Org default > Save
Click on <- Back to navigate to the page and see the output

Development

To create a new NG app and continue development, follow the below steps

NG app

cd force-app/ngapp
ng new hellong --style=scss --routing
cd hellong
npm run eject
To change the build path to point to force-app/main/default/staticresources, open force-app/ngapp/hellong/angular.json and update architect > builder > options > outputPath property to ../../main/default/staticresources/hellong
Create a file force-app/main/default/staticresources/hellong.resource-meta.xml and update it as below
```
  <?xml version="1.0" encoding="UTF-8"?>
  <StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
      <cacheControl>Private</cacheControl>
      <contentType>application/zip</contentType>
  </StaticResource>
```
- To continue development, run ng build --watch so any changes to your source code will be automatically copied to force-app/main/default/staticresources/hellong

Lightning Web Component

In VSCode - ctrl+shft+p or cmd+shft+p -> SFDC: Create Ligtning Component -> hellong -> default location (force-app/main/default/aura/)

Update force-app/main/default/aura/hellong/hellong.cmp as shown below

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
  <lightning:card title="Hello NG">
    <lightning:container
      aura:id="ngApp"
      src="{!$Resource.hellong + '/index.html'}"
      onmessage="{!c.handleMessage}"
      onerror="{!c.handleError}"
    />
  </lightning:card>
</aura:component>

In the above snippet update the src to point to the staticresources and mycomp folder

Optional - Update force-app/main/default/aura/mycomp/mycomp.css as shown below

  .THIS .slds-card__body {
      padding: 0 12px;
  }

  .THIS iframe {
      height: 400px;
  }

Finally update force-app/main/default/aura/hellong/hellongController.js as shown below

  ({
    handleMessage: function (component, event, helper) {
        var message = event.getParams();
        var navigationEvent = $A.get("e.force:navigateToSObject");
        navigationEvent.setParams({
            "recordId": message.payload.id,
            "slideDevName": "details"
        });
        navigationEvent.fire();
    },

    handleError: function (component, event, helper) {
        var error = event.getParams();
        console.log(error);
    }
  })