September 28, 2020

How to use CSS in Static Resource with MIME Type application/zip in LWC in Salesforce?

sample.css:

.textCSS {
    color: red;
}

.slds-card__header {
    color: green;
    font-weight: bold;
    text-align: center;
}

.slds-th__action {
    color: blue;
    justify-content: center !important;
}

.buttonCSS {
    background: black;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

Static Resource:


Apex Class:

public with sharing class LightningCardController {
    
    @AuraEnabled( cacheable = true )  
    public static List < Case > fetchRecs( String strAccId ) {  
        
        List < Case > listRecs = new List < Case >();
        String strSOQL = 'SELECT Id, Subject, Status, Origin FROM Case';

        if ( String.isNotBlank( strAccId ) )
            strSOQL  += ' WHERE AccountId = \'' + strAccId + '\'';
        
        strSOQL += ' LIMIT 3';
        system.debug( 'SOQL is ' + strSOQL );
        listRecs = Database.query( strSOQL );
        return listRecs;
          
    }

}


HTML:

<template>
    <lightning-card  title="My Cases">
        <p class="slds-p-horizontal_small">
            <lightning-datatable key-field="Id"  
                                 data={listRecs}  
                                 columns={columns}  
                                 hide-checkbox-column="true"
                                 class="textCSS">  
            </lightning-datatable>  
        </p>
        <p slot="footer" class="slds-align_absolute-center">            
            <button onclick={navigateToCaseHome} class="buttonCSS">View All Cases</button>          
        </p>
    </lightning-card>
    <template if:true = {error}>  
        {error}>              
    </template>
</template>


JavaScript:

import { api, LightningElement, wire } from 'lwc';
import fetchRecs from '@salesforce/apex/LightningCardController.fetchRecs';
import { NavigationMixin } from 'lightning/navigation';
import { loadStyle } from 'lightning/platformResourceLoader';
import LightningCardCSS from '@salesforce/resourceUrl/LightningCard';

const columns = [   
    { label: 'Subject', fieldName: 'Subject' },
    { label: 'Status', fieldName: 'Status' },
    { label: 'Case Origin', fieldName: 'Origin' }
];

export default class LightningCard extends NavigationMixin( LightningElement ) {

    @api AccountId;
    @api staticResName;
    columns = columns;
    listRecs;
    error;

    renderedCallback() {
        
        Promise.all([
            loadStyle( this, LightningCardCSS + '/' + this.staticResName )
            ]).then(() => {
                console.log( 'Files loaded' );
            })
            .catch(error => {
                console.log( error.body.message );
        });

    }

    @wire(fetchRecs, { strAccId: '$AccountId' })  
    wiredRecs( { error, data } ) {

        if ( data ) {

            console.log( 'Records are ' + JSON.stringify( data ) );
            this.listRecs = data;

        } else if ( error ) {

            this.listRecs = null;
            this.error = error;

        }
        
    }

    createNew() {

        this[NavigationMixin.Navigate]({            
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Case',
                actionName: 'new'                
            }
        });

    }

    navigateToCaseHome() {
        
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Case',
                actionName: 'home'
            }
        });

    }

}


meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="AccountId" type="String"/>
            <property name="staticResName" type="String"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>


Community Configuration:


Output:


No comments:

Post a Comment