Salesforce

Salesforce has hit us with some great additions and enhancements in winter 19 and here we bring you the Winter 19 highlights!!

Change Your View with Display Density Settings

Salesforce has always had a default look and feel when it comes to the number of fields that can fit on one screen. For me, this is the big one for this release. Starting in this release, administrators will be able to update the org’s Display Settings from Setup. Users can now switch between a “Comfy” or “Compact” look. Compact is able to fit 30% more fields on the page, they can see more information at a glance. All existing orgs will come with Comfy as the default setting. Density changes don’t apply to Communities or the Salesforce mobile app.

Salesforce Lightning Display Density Setting

Salesforce Lightning Compact View

Check a Field’s References Before You Edit It(Pilot)

Now you can see the references to a custom field, such as in a report or formula, with the click of a button. You can also communicate changes to others who use the field in a formula or other context.
Salesforce Check Field Reference

Schedule Event Series (Beta)

Let your reps schedule daily, weekly, monthly, or other repeating events from Lightning Experience and the Salesforce app.
Salesforce Lightning Schedule Event Series

Find the Data You Need in a Jiffy with List View Search

Use the new search bar to search the field data in your list views and find the records you need in record time.
Salesforce Lightning List View Search

Field History Tracking Data Deleted After 18 Months

Salesforce guarantees to retain your field history data for up to 18 months. To ensure high availability of data and accommodate the fast-growing data needs of our customers, up until now, we haven’t enforced the 18-month retention policy. Starting with the Winter ’19 release, we no longer retain field history beyond 18 months. To retain field history longer, you can purchase the Field Audit Trail add-on.

Assign a New Owner to Multiple Leads, Cases, or Custom Objects at One Time

Use the Change Owner page-level button to assign a new owner for up to 200 selected leads, cases, or custom objects. You can access the button in the page-level action menu in a list view or related list in standard table mode, or in Related List Quick Links.
Salesforce Bulk Change Owner
In the Change Owner dialog box, enter the new owner name, select Send Email Notification if needed, and click Submit. You must have Edit permission for a selected record to change its owner.

Say Goodbye to Copy and Paste and Hello to Quick Text

This one is for the users who find themselves sending the same types of emails on a regular basis. Copying and pasting content is time consuming and tedious. Now Quick Text can be created, stored, and referenced inside of Salesforce. Quick Text can be accessed from email, chat, Activities, or Knowledge Articles. You can even organize them in folders. To make quick text easier to use, salesforce added more ways to insert quick text. Use a keyboard shortcut, a button in rich-text editor toolbars, like for email publishers, or a popup button next to supported text fields

Move Actions and Buttons Easily When Transitioning to Lightning Experience (Beta)

Don’t have time to move all your Salesforce Classic actions and buttons into Lightning Experience? The latest Lightning Experience Configuration Converter feature does just that in a simple, easy to understand wizard. Select the objects and page layouts to work on, and Salesforce does the heavy moving. The Lightning Experience Configuration Convertor, which was made generally available during Summer ‘18, has been enhanced. Easily move custom, standard, and global actions from the Quick Actions in the Salesforce Classic Publisher section of a page layout to the Salesforce Mobile and Lightning Experience Actions section. Also included the right mobile actions and move custom and standard buttons along the way.

IntroDUCTION

In this series, I will share the practical example along with some reusable component for building the custom lightning component using SLDS. Salesforce Lightning Design System(SLDS) is the custom stylesheet used in lightning experience by Salesforce.

PROBLEM STATEMENT

As we all have used tables in some point of our career, sometimes there are so many columns, we have to truncate the data to adjust according to column width. Client usually prefer to have column resizing option for end users to adjust the column width as per their ease. We will implement the column resizing functionality in custom Lightning component.

PROPOSED SOLUTION

First we will use the dummy table shared by the Lightning Design System for Column Resizing. I have truncated some columns for better visibility.

We need to store the Original width of the selected column to calculate the new width for which I have defined the oldWidth attribute to store the value. We also need the distance of the selected column width from the left of the screen to identify the start point from where user start to drag the column. We have used mouseStart attribute for the same.

We have used two mouse events to identify when user start to drag and when user is dragging the column for adjusting the width. onmousedown will be fired when user click on the column divider element and ondrag will be fired when user is dragging the column divider element.

The Component Markup will be:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="mouseStart" type="string" />
    <aura:attribute name="oldWidth" type="string" />
    <table class="slds-table slds-table--bordered slds-table--fixed-layout slds-box slds-max-medium-table--stacked-horizontal" role="grid">
        <thead>
            <tr class="slds-line-height--reset">
                <th class="slds-is-resizable slds-text-title--caps" scope="col">
                    <span class="slds-truncate" title="Name">Name</span>
                    <div class="slds-resizable">
                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-602" tabindex="0" />
                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}" ondrag="{!c.setNewWidth}">
                            <span class="slds-resizable__divider"></span>
                        </span>
                    </div>
                </th>
                <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
                    <span class="slds-truncate" title="Account Name">Account Name</span>
                    <div class="slds-resizable">
                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-603" tabindex="0" />
                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}" ondrag="{!c.setNewWidth}">
                            <span class="slds-resizable__divider"></span>
                        </span>
                    </div>
                </th>
                <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
                    <span class="slds-truncate" title="Close Date">Close Date</span>
                    <div class="slds-resizable">
                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-604" tabindex="0" />
                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}" ondrag="{!c.setNewWidth}">
                            <span class="slds-resizable__divider"></span>
                        </span>
                    </div>
                </th>
                <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
                    <span class="slds-truncate" title="Stage">Stage</span>
                    <div class="slds-resizable">
                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-605" tabindex="0" />
                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}" ondrag="{!c.setNewWidth}">
                            <span class="slds-resizable__divider"></span>
                        </span>
                    </div>
                </th>
                <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
                    <span class="slds-truncate" title="Confidence">Confidence</span>
                    <div class="slds-resizable">
                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-606" tabindex="0" />
                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}" ondrag="{!c.setNewWidth}">
                            <span class="slds-resizable__divider"></span>
                        </span>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="slds-hint-parent">
                <th scope="row">
                    <div class="slds-truncate" title="Acme - 1,200 Widgets"><a href="javascript:void(0);">Acme - 1,200 Widgets</a></div>
                </th>
                <td role="gridcell">
                    <div class="slds-truncate" title="Acme">Acme</div>
                </td>
                <td role="gridcell">
                    <div class="slds-truncate" title="4/10/15">4/10/15</div>
                </td>
                <td role="gridcell">
                    <div class="slds-truncate" title="Value Proposition">Value Proposition</div>
                </td>
                <td role="gridcell">
                    <div class="slds-truncate" title="30%">30%</div>
                </td>
            </tr>
            <tr class="slds-hint-parent">
                <th scope="row">
                    <div class="slds-truncate" title="Acme - 200 Widgets"><a href="javascript:void(0);">Acme - 200 Widgets</a></div>
                </th>
                <td role="gridcell">
                    <div class="slds-truncate" title="Acme">Acme</div>
                </td>
                <td role="gridcell">
                    <div class="slds-truncate" title="1/31/15">1/31/15</div>
                </td>
                <td role="gridcell">
                    <div class="slds-truncate" title="Prospecting">Prospecting</div>
                </td>
                <td role="gridcell">
                    <div class="slds-truncate" title="60%">60%</div>
                </td>
            </tr>
            <tr class="slds-hint-parent">
                <th scope="row">
                    <div class="slds-truncate" title="salesforce.com - 1,000 Widgets"><a href="javascript:void(0);">salesforce.com - 1,000 Widgets</a></div>
                </th>
                <td role="gridcell">
                    <div class="slds-truncate" title="salesforce.com">salesforce.com</div>
                </td>
                <td role="gridcell">
                    <div class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</div>
                </td>
                <td role="gridcell">
                    <div class="slds-truncate" title="Id. Decision Makers">Id. Decision Makers</div>
                </td>
                <td role="gridcell">
                    <div class="slds-truncate" title="70%">70%</div>
                </td>
            </tr>
        </tbody>
    </table>
</aura:component>

We have defined calculateWidth method which will be called when onmousedown event will be fired. It will calculate the existing width of the selected column and it’s distance from left of the screen which will be stored in custom attributes defined by us. The other method setNewWidth will be called when user is dragging(ondrag event) the column divider to calculate and set the new width of the column.

The Component Controller will be:

  ({
	calculateWidth : function(component, event, helper) {
			var childObj = event.target
            var parObj = childObj.parentNode;
            var count = 1;
            //parent element traversing to get the TH
            while(parObj.tagName != 'TH') {
                parObj = parObj.parentNode;
                count++;
            }
        	console.log('final tag Name'+parObj.tagName);
        	//to get the position from the left for storing the position from where user started to drag
        	var mouseStart=event.clientX; 
        	component.set("v.mouseStart",mouseStart);
        	component.set("v.oldWidth",parObj.offsetWidth);
	},
    
    setNewWidth : function(component, event, helper) {
			var childObj = event.target
            var parObj = childObj.parentNode;
            var count = 1;
      		//parent element traversing to get the TH
            while(parObj.tagName != 'TH') {
                parObj = parObj.parentNode;
                count++;
            }
        	var mouseStart = component.get("v.mouseStart");
        	var oldWidth = component.get("v.oldWidth");
        	//To calculate the new width of the column
        	var newWidth = event.clientX- parseFloat(mouseStart)+parseFloat(oldWidth);
        	parObj.style.width = newWidth+'px';//assign new width to column
    }
})

The final look of the lightning component will be:

Lightning Table Column Resizing

Salesforce Winter 19 highlights!

Deep Dive into Lightning Design System(Table Column resizing)

IntroDUCTION

PROBLEM STATEMENT

PROPOSED SOLUTION