Convert Lightning Web Components Open Source to Salesforce

In my previous post we checked how we can quickly create Open Source Lightning Web Components and connect them with Salesforce. Today we will check how we can convert Lightning Web Components Open Source and make it Salesforce compatible.

For this we need to follow some steps:
1. Create meta.xml file for all components as this is a required file.
2. In Open Source component we use my- namespace. We need to replace that with default namespace -c.
3. If you are gettting data from Salesforce then you need to create an Apex class to get the data and perform other DML operations.
4. Remove the reference of Data Service in JS controller.

We will use the same components which we have created earlier.

Now we need to deploy this code into Salesforce. But we are not manually adding them. We will use VScode to do that. Just move these files into your VScode org backup. If you don’t have backup of your current code you can follow steps from here.
Then in VScode move the component folder and refresh the backup so that you can view the folder. To deploy this code enter ctrl + P > Select the app folder in sidebar and select Deploy code to org. You woll get success message once the code is moved.

• 

• 

Now we will create an Apex class to get contact details and call that in our JS controller using wire method. After performing all the changes this is how our updated code will look like.

app.html

<template>
    <header>
        <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
        <h2>Contact Records by NewsTechnologyStuff</h2>
    </header>
    <!-- Page code -->
    <main class="content">
        <div class="list">
            <input type="search" placeholder="Search contacts..."
                    oninput={searchdata} />

            <template for:each={contacts} for:item="cont">
                <a key={cont.id} class="contact">
                    <div>
                        <p class="title">{cont.FirstName} {cont.LastName}</p>
                        <p class="icon email">{cont.Email}</p>
                    </div>
                </a>
            </template>
        </div>
    </main>
</template>

app.js

import { LightningElement,wire, track } from 'lwc';
import getContacts from '@salesforce/apex/ContactDetails.getContacts';

export default class App extends LightningElement {
    @track contacts = [];
    @wire(getContacts)
        Contacts({ error, data }) {
        if (data) {
            this.contacts = this.allContacts = data;
        } else if (error) {
            this.sescontactssions = [];
            throw new Error('Failed to retrieve date');
        }
    }

    searchdata(event) {
    const searchKey = event.target.value.toLowerCase();
    this.contacts = this.allContacts.filter(
        contact => contact.LastName.toLowerCase().includes(searchKey)
    );
  }
}

app.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="app">
    <apiVersion>46.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

ContactDetails.cls

public with sharing class ContactDetails {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContacts(String userId) {
        return [SELECT ID, FirstName, LastName, Email From Contact LIMIT 10];
    }
}

And this is how our output will look

So we have successfully Convert Lightning Web Components Open Source into Salesforce. We can follow reverse approach to convert Salesforce Lightning Web Components to Open Source Lightning Web Components. Our component is simple but in complex compenets we need to take care of CSS as well.

Did you like the post or do you have any questions, let me know in comments section. Happy Programming 🙂