Tag: lightning

Lightning data table conditional cell color

January 29th, 2023
Reading Time: 2 minutes
Are you looking to add a bit of personality and flair to your lightning data table? Conditional cell color gives designers and developers the opportunity to transform their table into something unique and eye-catching.

With conditional cell color, you are able to control the color of a cell and its contents based on the value of a particular item in the table. This means that each cell in a row can have its own distinct color, letting you highlight important information, emphasize data, and make the table look more visually appealing.

Expected result

Salesforce Lightning is a component-based framework for building user interfaces on the Salesforce platform. It provides a modern and efficient way for developers to create and deploy custom user interfaces that can run on any device, including desktops, laptops, tablets, and smartphones.

A Lightning Component is a reusable unit of code that implements a specific feature or functionality. Components can be composed into larger applications and can be easily reused and customized to meet different business needs. They are written in Aura, a proprietary JavaScript-based language, and use the Lightning Data Service to communicate with the Salesforce server.

Lightning Components provide a number of benefits, including faster performance, improved user experience, and greater customization options compared to traditional Salesforce user interfaces. They are an essential part of the Salesforce Lightning platform and are widely used by organizations to build custom applications and extend the functionality of the Salesforce platform.

Lightning data tables allow users to customize the colors of cells in a table based on the values of the cell using conditional formatting. This is a powerful tool for quickly identifying trends and outliers in data sets. With Lightning data tables, Salesforce developers can set color thresholds to automatically color cells according to whether their value is above/below a certain value or between two values. This feature is especially useful for displaying numerical values such as sales data, which often need to be highlighted at a glance so that users can quickly identify areas for improvement.

Let say you want to highlight a cell in a Lightning data table (lightning:datatable) when a specific value is invalid. In our example, we want to display those invalid emails in red.

The UI component
```
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>

<lightning:datatable
                             columns="{! v.columns }"
                             data="{! v.data }"
                             keyField="id"/>
```
The Component’s JS controller
```
doInit : function(component, event, helper) {
        component.set('v.columns', [
            { label: 'First Name', fieldName: 'firstName', type: 'text' },
            { label: 'Last Name', fieldName: 'lastName', type: 'text' },
            { 
                label: 'Email', 
                fieldName: 'email', 
                type: 'text',
                cellAttributes: {
                    class: {
                        fieldName: 'emailCellClass'
                    }
                }
            }
        ]);
        
        component.set('v.data', [
            {
                firstName: "Emelie", 
                lastName:"Sloan", 
                email: "valid@email.com", 
                emailCellClass: 'slds-truncate'
            },
            {
                firstName: "John", 
                lastName: "Jackson", 
                email:"invalid@email.com", 
                emailCellClass : "slds-truncate slds-text-color_error"
            }
        ]);
    },
```
November 15, 2023Salesforce Flows have this little big drawback
November 10, 2023How to publish Salesforce platform events from Salesforce API from Node.js
November 7, 2023How to generate Database.SaveResult mocks in Salesforce
October 19, 2023How to disable parallel tests in Salesforce
October 3, 2023SFDX CLI Error: default level:TRACE must be included in custom levels
September 23, 2023What is Dreamforce?

Load dynamic data into a table using Lightning Web Component

November 8th, 2021

Reading Time: 3 minutes

Result

Lightning Component

Create the component thus:


 <aura:component implements="force:appHostable"
                controller="OpportunitiesTabController">
    
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    
    <aura:handler name="init" value="{! this <}" action="{! c.doInit }"/>
    
    <article class="slds-card slds-p-bottom_x-small">
        
        <div class="slds-card__body slds-card__body_inner">
            
            <div class="slds-m-top_x-small">
                <lightning:button
                                  aura:id="refresh"
                                  label="Refresh"
                                  title="Refresh"
                                  onclick="{!c.doInit}"
                                  />
            </div>
            
            <div class="slds-text-heading_medium slds-m-top_x-small">Opportunities</div>
            <lightning:datatable
                                 columns="{! v.columns }"
                                 data="{! v.data }"
                                 keyField="id"
                                 onrowaction="{! c.handleRowAction }"/>
            
            
        </div>
    </article>
    
</aura:component>

JS controller

      
({
	doInit : function(component, event, helper) {
		helper.loadOpportunities(component);
	},
    
    handleRowAction: function (component, event, helper) {
        var action = event.getParam('action');
        var row = event.getParam('row');
        
        switch (action.name) {
            case 'toLowerCase':
                helper.execute(component, row.Id, 'c.toLowerCase');
                break;
            case 'toUpperCase':
                helper.execute(component, row.Id, 'c.toUpperCase');
                break;
                
        }
    },
})

JS helper

      
({
    execute : function(component, opptyId, method) {
        console.info('executing: '+method + ' oppty id: '+opptyId)
        const action = component.get(method);
        action.setParams({
            opptyId: opptyId
        });
        action.setCallback(this, function(response) {
            const state = response.getState();
            if (state === "SUCCESS") { 
                console.info(method+' done');
                this.loadOpportunities(component);
            }else {
                console.error(" Error: " + JSON.stringify(response.getError()));
                alert(JSON.stringify(response.getError()));
            }
        });
        $A.enqueueAction(action);
    },
    
    loadOpportunities : function(component) {
		console.info('loading opportunities')
        const actions = [{ label: 'To Lower Case', name: 'toLowerCase' },
                        { label: 'To Upper Case', name: 'toUpperCase' }];
       
        
        component.set('v.columns', [
            { label: 'Name', fieldName: 'linkName', type: 'url', 
             typeAttributes:{label:{fieldName: 'Name'}} },
            { label: 'Account', fieldName: 'linkAccount', type: 'url', 
             typeAttributes:{label:{fieldName: 'nameAccount'}} },
            { label: 'Stage Name', fieldName: 'StageName', type: 'text' },
            { label: 'Created Date', fieldName: 'CreatedDate', type: 'datetime' },
            { type: 'action', typeAttributes: { rowActions: actions } }
        ]);
        
        const action = component.get("c.getOpportunities");
        action.setCallback(this, function(response) {
            const state = response.getState();
            if (state === "SUCCESS") {
                console.info(" opportunities loaded");
                const records = response.getReturnValue();
                records.forEach(function(record){
                    record.linkName = '/'+record.Id;
                    
                    if(record.Account){
                        record.linkAccount = '/'+record.AccountId;
                        record.nameAccount = record.Account.Name  
                    } else {
                        record.linkAccount = '/#';
                        record.nameAccount = 'no account';  
                    } 
                    
                });
                component.set('v.data', records);
            }else {
                console.error(" Error: " + JSON.stringify(response.getError()));
            }
        });
        $A.enqueueAction(action);
    },
})

Apex class controller

      
public class OpportunitiesTabController {
    
    @AuraEnabled
    public static void toLowerCase(Id opptyId){
        try{
            Opportunity opp = [SELECT Id, Name FROM Opportunity WHERE Id = :opptyId];
            opp.Name = opp.Name.toLowerCase();
            update opp;
        }catch(Exception e){
            throw new AuraException(e.getMessage());
        }
        
    }
    
    @AuraEnabled
    public static void toUpperCase(Id opptyId){
        try{
            Opportunity opp = [SELECT Id, Name FROM Opportunity WHERE Id = :opptyId];
            opp.Name = opp.Name.toUpperCase();
            update opp;   
        }catch(Exception e){
            throw new AuraException(e.getMessage());
        }
    }    
    
    
    @AuraEnabled
    public static List<Opportunity> getOpportunities(){
        return [SELECT Id, Name, StageName, CreatedDate, Account.Name, AccountId 
                FROM Opportunity ORDER BY CreatedDate DESC LIMIT 10]; 
    }
}

Add a tab with our component

Photo by Dimitra Peppa on Unsplash

Get Visualforce usage stats from VisualforceAccessMetrics

May 22nd, 2021
Reading Time: < 1 minute
If you’re an administrator of a Salesforce org, you need to know how your users are interacting with your Visualforce pages. With Salesforce VisualforceAccessMetrics, you can easily get usage stats for your Visualforce pages and track page performance.

VisualforceAccessMetrics is a tool that lets you see which Visualforce pages are being accessed, how long users are staying on the page, and the page performance status. The data from VisualforceAccessMetrics can be used to optimize page performance and provide a better user experience.

If you want to know how frequently your Visualforce pages are accessed, you just have to run a simple query on VisualforceAccessMetrics:
```
SELECT ApexPageId,DailyPageViewCount,Id,MetricsDate 
FROM VisualforceAccessMetrics
```
More options
```
SELECT ApexPageId, MetricsDate, TotalTime, AverageTime, TotalRequests, UniqueUsers
FROM VisualforceAccessMetrics
WHERE MetricsDate = TODAY
```
Have in mind that query will return stats from the latest 90 days

Pageviews are tallied the day after the page is viewed, and each VisualforceAccessMetrics object is removed after 90 days.

But beware, that query could return deleted pages.

To fix that, let’s tweak the query to:
```
SELECT Id, Markup, Name, NamespacePrefix 
FROM ApexPage 
WHERE Id IN (SELECT ApexPageId FROM VisualforceAccessMetrics)
```
Now the query will return only existing pages.

Migrate sforce.connection.query to Lightning equivalent

May 11th, 2021

Reading Time: 2 minutes

As you probably know, JavaScript buttons are not supported in Lightning Experience (LEX). In particular, you can’t use REQUIRESCRIPT.

In this post, the idea is to show how to migrate a particular JavaScript button that uses sforce.connection.query sentence.

Suppose our JavaScript button is like this:

      
{!REQUIRESCRIPT("/soap/ajax/37.0/connection.js")} 
{!REQUIRESCRIPT("/soap/ajax/37.0/apex.js")} 
 
var query ="SELECT Id, Name FROM Account LIMIT 10";
var queryRecords= sforce.connection.query(query);
var records = queryRecords.getArray("records"); 
//Do something with the records...

A Lightning equivalent solution requires several steps. I assume that you have some knowledge about Lightning Components development as well as Apex development.

Well, let’s go!

Create a Lightning component called MyQueryResult and Its JavaScript controller

MyQueryResult.cmp

      
<aura:component controller="MyQueryResultService" >
    <aura:attribute name="queryResult" type="SObject[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  
    <!-- It just displays the results. Modify It depending on your needs -->
    <aura:iteration items="{! v.queryResult}" var="item">
        {!item.Id} - {!item.Name}<br/>
     </aura:iteration>
</aura:component>

MyQueryResult.js

      
({
    doInit : function(component, event, helper) {
        var myQuery = 'SELECT Id, Name FROM Account LIMIT 10';
        var action = component.get("c.executeQuery");
        action.setParams({
            "theQuery": myQuery
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state == "SUCCESS" && component.isValid()){
                console.log("success") ;
                var queryResult = response.getReturnValue();
                console.log(queryResult);
                component.set("v.queryResult", queryResult);
            }else{
                console.error("fail:" + response.getError()[0].message); 
            }
        });
        $A.enqueueAction(action);
    }
})

We will need also a service (an Apex class) to execute our query

MyQueryResultService

      
public class MyQueryResultService {
 
    @AuraEnabled
    public static List<sObject> executeQuery(String theQuery){
        try{
            String query = String.escapeSingleQuotes(theQuery);
            return Database.query(query);
        }catch(Exception e){
            throw new AuraHandledException('Error doing the query: '+theQuery+' Error: '+e.getMessage());
        }
    }
}

After that, we need a quick action pointing to our component.

The last step is to add our quick action to the layouts we need

Read more about this at Lightning Alternatives to JavaScript Buttons

Photo by Glenn Carstens-Peters on Unsplash

Tag: lightning

Lightning data table conditional cell color

Expected result

The UI component

The Component’s JS controller