How to add multiple languages in salesforce community

This post explains how to add different languages in the salesforce community builder. To add multiple languages in salesforce community :

• Setup -> All sites
• Click builder in front of your community
• On the left side click on the setting icon.

• You will see the multiple sub-tabs here. Click on Languages.

• From here click on the add language button and add any of the language according to your requirement.

You can also change the default language for your community from here as well.

Default language will be your community language but you can translate the content in added languages.

Thanks, 
Lovesalesforceyes

Server side pagination in LWC and AURA salesforce

This post explains server side pagination in LWC. Below is the demo of output :

To change the number of records in a single page, change pagesize (variable in data_table.js) accordingly.

data_table.cmp :

<template>

    <div>

        <lightning-datatable

                key-field="id"

                data={caseData}

                columns={caseColumns}

                onrowaction={handleRowAction}>

        </lightning-datatable>

    </div>  

     <template if:true={showpagination}>

        <lightning-layout-item padding="around-small">

            <div class="slds-align_absolute-center">

                <lightning-button variant="base" 

                                    label="First" 

                                    disabled={disableFirst} 

                                    onclick={handleFirst}

                                    class="slds-m-left_x-small">

                </lightning-button>

                <lightning-button variant="base" 

                                    label="<<" 

                                    disabled={disableFirst} 

                                    onclick={handlePrevious}

                                    class="slds-m-left_x-small slds-m-right_x-small">

                </lightning-button>

                <template for:each={pagelist} for:item="item" for:index="index">

                    <span key={item} data-id={item} class="testcss slds-m-left_xx-small slds-m-right_xx-small slds-p-horizontal_x-small">

                        <b> <a class="testcss"  onclick={processMe} name={item} data-id={item}>{item}</a></b>

                    </span>

                </template>

                <lightning-button variant="base" 

                                label=">>" 

                                disabled={disableNext} 

                                onclick={handleNext}

                                class="slds-m-left_x-small">

                </lightning-button>

                <lightning-button variant="base" 

                                label="Last" 

                                disabled={disableNext} 

                                onclick={handleLast}

                                class="slds-m-left_x-small">

                </lightning-button>

            </div>

        </lightning-layout-item>

    </template>

   

</template>

data_table.js :

import { LightningElement,track,wire } from 'lwc';

import loadCases from '@salesforce/apex/data_table.loadCases';

export default class data_table extends LightningElement {

    @track pagenumber = 1;

    @track recordstart = 0;

    @track recordend = 0;

    @track totalrecords = 0;

    @track pagesize = 3;

    @track totalpages = 1;

    @track showpagination=true;

    @track pagelist;

    @track isLoaded = false;

    @track caseData;

    @track caseColumns = [

    { label: 'Case Number', fieldName: 'CaseNumber', type: 'text'},

    { label: 'Subject', fieldName: 'Subject', type: 'text'},

    { label: 'Priority', fieldName: 'Priority', type: 'text'}

    ];

    @wire(loadCases, {

    pageNumber: "$pagenumber",

    pageSize: "$pagesize"

    })

    getCaseRecord(result){

        if (result.data) {

            this.caseData = result.data.caseList;

            this.totalrecords = result.data.totalRecords;

            this.recordstart = result.data.recordStart;

            this.recordend = result.data.recordEnd;

            this.totalpages = Math.ceil(this.totalrecords / this.pagesize);

            this.generatePageList(this.pagenumber, this.totalpages);

            this.isLoaded = false;

            if(this.totalpages==1){

                this.showpagination=false;

            }else{

            this.showpagination=true; 

            }

        }

    }

    renderedCallback(){

        this.template.querySelectorAll('.testcss').forEach((but) => {

            but.style.backgroundColor = this.pagenumber===parseInt(but.dataset.id,10) ? '#F47920' : 'white';

            but.style.color = this.pagenumber === parseInt(but.dataset.id, 10) ? 'white' : 'black';

        });

    }

    handleFirst(event) {

        this.isLoading = true;

        var pagenumber = 1;

        this.pagenumber = pagenumber;

    }

    processMe(event) {

        var checkpage = this.pagenumber;

        this.pagenumber = parseInt(event.target.name);

        if (this.pagenumber != checkpage) {

        this.isLoading = true;

        }

    }

    get disableFirst() {

        if (this.pagenumber == 1) {

        return true;

        }

        return false;

    }

    get disableNext() {

        if (

        this.pagenumber == this.totalpages ||

        this.pagenumber >= this.totalpages

        ) {

        return true;

        }

        return false;

    }

    handlePrevious(event) {

        this.isLoading = true;

        this.pagenumber--;

    }

    handleNext(event) {

        this.isLoading = true;

        this.pagenumber = this.pagenumber + 1;

    }

    handleLast(event) {

        this.isLoading = true;

        this.pagenumber = this.totalpages;

    }

    generatePageList = (pagenumber, totalpages) => {

        var pagenumber = parseInt(pagenumber);

        var pageList = [];

        var totalpages = this.totalpages;

        this.pagelist = [];

        if (totalpages > 1) {

            if (totalpages < 3) {

                if (pagenumber == 1) {

                    pageList.push(1, 2);

                }

                if (pagenumber == 2) {

                    pageList.push(1, 2);

                }

            } else {

                if (pagenumber + 1 < totalpages && pagenumber - 1 > 0) {

                    pageList.push(pagenumber - 1, pagenumber, pagenumber + 1);

                } else if (pagenumber == 1 && totalpages > 2) {

                    pageList.push(1, 2, 3);

                } else if (pagenumber + 1 == totalpages && pagenumber - 1 > 0) {

                    pageList.push(pagenumber - 1, pagenumber, pagenumber + 1);

                } else if (pagenumber == totalpages && pagenumber - 1 > 0) {

                    pageList.push(pagenumber - 2, pagenumber - 1, pagenumber);

                }

            }

        }

        this.pagelist = pageList;

    };

}

data_table.apx :

public with sharing class data_table {

    @AuraEnabled(cacheable=true)

    Public static caseDataWrapper loadCases(Decimal pageNumber,Decimal pageSize){

        caseDataWrapper res = new caseDataWrapper();

        Integer pSize;

        if(pageSize!=null && pageSize!=0.0){

            pSize = (Integer)pageSize;    

        }else{

            pSize=10;  

        } 

        Integer pNumber = (Integer)pageNumber;

        Integer offset = (pNumber - 1) * pSize;

        list<case> c = new list<case>();

        String query = 'Select id,CaseNumber,Subject, priority from Case LIMIT :pSize OFFSET :offset';

        String countQuery = 'select count() from case';

        c = Database.query(query);

        res.caseList = c;

        res.totalRecords = Database.countQuery(countQuery);

        res.recordStart = offset + 1;

        Integer recordEnd = pSize * pNumber;

        res.recordEnd = res.totalRecords >= recordEnd ? recordEnd : res.totalRecords; 

        return res;

    }

    public class caseDataWrapper {

        @AuraEnabled

        public Integer totalRecords {get;set;}

        @AuraEnabled

        public Integer recordStart {get;set;}

        @AuraEnabled

        public Integer recordEnd {get;set;}

        @AuraEnabled

        public List<case> caseList {get;set;}

    } 

}

Thanks, 
Lovesalesforceyes

How to add menu button in lightning datatable salesforce

This post explains how to add menu button in lightning datatable in LWC and AURA. Below is the demo of output :

menuButton.cmp :

<template>

    <div>

        <lightning-datatable

                key-field="id"

                data={caseData}

                columns={caseColumns}

                onrowaction={handleRowAction}>

        </lightning-datatable>

    </div>    

</template>

menuButton.js :

import { LightningElement,track,wire } from 'lwc';

import loadCases from '@salesforce/apex/data_table.loadCases';

const actions = [

{ label: 'Edit', name: 'Edit' },

{ label: 'Delete', name: 'Delete' },

];

export default class menuButton extends LightningElement {

    @track caseData;

    @track caseColumns = [

    { label: 'Case Number', fieldName: 'CaseNumber', type: 'text'},

    { label: 'Subject', fieldName: 'Subject', type: 'text'},

    { label: 'Priority', fieldName: 'Priority', type: 'text'},

    {

    type: 'action',

    typeAttributes: { rowActions: actions },

    }

    ];

    @wire(loadCases)

    getCaseRecord(result){

        if (result.data) {

            this.caseData = result.data;

        }

    }

    handleRowAction(event){

        const actionName = event.detail.action.name;

        if(actionName == 'Edit'){

            // Edit operation

            console.log('Edit');

        }

        if(actionName == 'Delete'){

            // Delete operation

            console.log('Delete');

        }

    }

}

data_table.apx :

public with sharing class data_table {

    @AuraEnabled(cacheable=true)

    Public static list<case> loadCases(){

        list<case> c = new list<case>();

        String query = 'Select id,CaseNumber,Subject, priority from Case';

        c = Database.query(query);

        return c;

    }

}

Thanks, 
Lovesalesforceyes

How to hide the default row number from lightning datatable salesforce

In this post I will explain how to remove default row number from lightning datatable in LWC and aura.

Method 1 : 

Remove show-row-number-column attribute from the lightning datatable.

Method 2:

1.) Create csv file removeRow.css and paste the following code.

removeRow.css:

.slds-table tr th:first-child{

    width:0 !important;

}

2.) Create new static resource with the following details:

• Name               : removeRow
• File                  : Upload the removeRow.css file created in step 1.
• Cache Control : Public

3.) Refer the following code:

data_table.cmp:

<template>

    <div>

        <lightning-datatable

                key-field="id"

                data={caseData}

                columns={caseColumns}>

        </lightning-datatable>

    </div>    

</template>

data_table.js:

import { LightningElement,track,wire } from 'lwc';

import loadCases from '@salesforce/apex/data_table.loadCases';

import {loadStyle} from 'lightning/platformResourceLoader'

import REMOVEROW from '@salesforce/resourceUrl/removeRow'

export default class data_table extends LightningElement {

    @track caseData;

    @track caseColumns = [

    { label: 'Case Number', fieldName: 'CaseNumber', type: 'text'},

    { label: 'Subject', fieldName: 'Subject', type: 'text'},

    { label: 'Priority', fieldName: 'Priority', type: 'text'},

    ];

    @wire(loadCases)

    getCaseRecord(result){

        if (result.data) {

            this.caseData = result.data;

        }

    }

    renderedCallback(){ 

        Promise.all([

            loadStyle( this, REMOVEROW)

            ]).then(() => {

                console.log( 'Files loaded' );

            })

            .catch(error => {

                console.log( 'error',error );

        });

    }

}

data_table.apx:

public with sharing class data_table {

    @AuraEnabled(cacheable=true)

    Public static list<case> loadCases(){

        list<case> c = new list<case>();

        c = [Select id,CaseNumber,Subject, priority from Case];

        return c;

    }

}

Thanks,
Lovesalesforceyes