Salesforce Blogs | Salesforce Lightning Tweaks

Jun 26, 2017

Update, Delete Record from DataTable in Lightning

By Sujesh Ramachandran 6/26/2017 4 comments:

In Lightning, let's see how we can easily access the current record in a list view or data table to update/delete. Those who are familiar with Visualforce will see a slight change in the concept to achieve this as we have a follow a component based design to update/delete record in a list view or data table.

In the below example, we are fetching account records and displaying in a data table with Update, Delete Icon for each record. User could click on any account specific edit, delete to fire the respective action. In this code snippet, we are just showing the trick to access the respective record Id and record object of the user selected account, so that the user could use the selected record id, record object to either edit or delete the record.

Now lets see the parent component(Demo_CRUD_Component) wherein we are fetching accounts and displaying the list of records using an Iteration. In iteration we use a child component(Demo_CRUD_Component_ROW) to display each record. To child component, we are passing single record, so that the edit, delete event can be easily handled in the child component. Let's see the code of parent component(Demo_CRUD_Component), related controller and apex class.

Here is the code of child component wherein we are handling the edit and delete for each record. Since we have designed the child component for each record, it is easy to get the current record or object, selected by user for either edit, delete. Let's see the code of child component(Demo_CRUD_Component_ROW).

Here is the the screenshot associated with the example:

follow me @ramsujesh

About Vanakkam Coimbatore Meetup

By Sujesh Ramachandran 2/04/2017 No comments:

Inaugural meetup at Coimbatore memories is going to stay for a while, what an amazing turn out. Never expected the participants will be around 350+ having just 160 RSVP for the event in meetup.

We(Madan, Ritika, Salma, Veda and myself) reached SNS college in the morning and checked the event happening RNG hall and other primary arrangements done, everything was fine. In the guest room, we had an hour discussion on how we should schedule all the sessions for the event. We had a lite lunch and reached RNG hall before an hour for the event to arrange swags and be ready with the presentation. Slowly students started coming to the RNG hall at around 1:30 pm.

Around 2:30PM we started the session, and you don't believe it was around 350+ students in the hall. We just started an Intro about Coimbatore Salesforce Developer Group and proceeded as per the agenda planned for the day.

Here is quick details about the agenda:

-Coimbatore DUG Intro

-Cloud Computing, CRM Overview

-Salesforce Overview and Opportunity

-Q & A

-Trailhead Workshop

-Feedback Session

-Cloud Trivia

Q & A session went for a while as students had lot of questions to ask and were able to answer only limited questions and requested them to send questions as email, tweet or in meetup.

Trailhead workshop went for about 45 minutes and not all were able to participate in workshop as having limited systems and connectivity. "Trailhead guides properly with step by step tutorial, interactive and easy to follow the steps" said by a student of SNS college of Technology in the feedback session.

I wanted to thank Ravi, HOD of placement at SNS college of Technology and his colleagues for all the arrangements, also Mohan kumar, alumni of SNS college for the support. And finally would like to thank the Salesforce developer community, especially Regina Walton Kavindra Patel and also without the support of Madan Khichi, Ritika Bhargava, Salma Khatun and Veda Hebbar, the event would not have become reality.

Before leaving we got a chance to meet the chairman of SNS College of Technology, happy to hear from him the bigger plans for the students in the coming days.

Hope we will be able to have many more events in the coming months to share and gain knowledge.

Also, if you would like to see more details about the event, here are few links:

https://www.facebook.com/madan.khichi/posts/1502229136473645

https://www.meetup.com/Coimbatore-Salesforce-Developer-Group/events/236765809/

follow me @ramsujesh

Brand your lightning component

By Sujesh Ramachandran 1/15/2017 1 comment:

Do you want to brand your lightning component while display under app builder? here it is an out of box feature to show an icon for your lightning component. All you need to do is to design an SVG icon for your component and add under the SVG supporting file of your lightning component.

Also, ThemeColorConfigure.design can also be used to configure the display name of the ThemeColorConfigure.cmp in app builder using the attribute 'label' for the design:component . In this example, I have given as 'Theme Color Picker', so that the name will be displayed under the available custom lightning component list.

Here is an example to show the icon and label for the lightning component and will see how it looks like in the app builder.

Screenshot from App Builder:

follow me @ramsujesh

Event Monitoring in Salesforce

By Sujesh Ramachandran 1/15/2017 16 comments:

Salesforce Provides detailed info about the user activty and you could use the details to Monitor data loss, Increase adoption, Optimize performance and bulid powerful tools to either visualize the details or any automated service for User tracking etc. Event monitoring is one of many tools that Salesforce provides to help keep your data secure. It lets you see the granular details of user activity in your organization. These user activities are referred as events. You can view information about individual events or track trends in events to swiftly identify abnormal behavior and safeguard your company’s data.

Event monitoring provides tracking for more than 30 different types of events, including:

Apex Callout
Apex Execution
Apex SOAP
Apex Trigger
API
Async Report
Bulk API
Change Set Operation
Content Distribution
Content Document Link
Content Transfer
Dashboard
Document Attachment Downloads
Login
Login As
Logout
MDAPI Operation
Multiblock Report
Package Install
Queued Execution
Report
Report Export
REST API
Salesforce1 Adoption (UI Tracking)
Sandbox
Sites
Time-Based Workflow
Transaction Security
UI Tracking
URI
Visualforce Request
Wave Change
Wave Interaction
Wave Performance

All these events are stored in event log files. An event log file is generated when an event occurs in your organization and is available to view and download after 24 hours. The event types you can access and how long the files remain available depends on your edition.

Developer Edition (DE) organizations have free access to all 30+ log types with one-day data retention.
Enterprise, Unlimited, and Performance Edition organizations have free access to the login and logout log files with one-day data retention. For an extra cost, you can access all log file types with 30-day data retention.

Considerations while using Event Monitoring:

LogDate tracks usage activity for a 24-hour period, from 12:00 a.m. to 11:59 p.m. UTC time.
Log files are available based on CreatedDate for the last 30 days when orgs purchase User Event Monitoring or one day for Developer Edition orgs.
In the unlikely case where no log files are generated for 24 hours, contact Salesforce.
Log data is read-only. You can’t insert, update, or delete log data.
Use the EventType field to determine which files were generated for your org.
An event generates log data in real time. However, log files are generated the day after an event takes place, during nonpeak hours. Therefore, log file data is unavailable for at least one day after an event.
CreatedDate tracks when the log file was generated.
Log files, represented by the EventType field, are generated only if there is at least one event of that type for the day. If no events took place, the file isn’t generated for that day.
All event monitoring logs are exposed to the API through the EventLogFile object, however there is no access through the user interface.

Event monitoring Using REST
Use the SObject Describe resource to retrieve all metadata for an object, including information about fields, URLs, and child relationships.

Query Event Monitoring Data with REST
Use the Query resource to retrieve field values from a record. Specify the fields you want to retrieve in the fields parameter and use the GET method of the resource. You can use Workbench to query event monitoring data. To retrieve event monitoring records based on LogDate and EventType

Get Event Monitoring Content from a Record
Use the SObject Blob Retrieve resource to retrieve BLOB data for a given record. You can use Workbench to retrieve BLOB data for event monitoring. In the Execute text box, use a GET request similar to this: /services/data/v32.0/sobjects/EventLogFile/0ATD000000000pyOAA/LogFile.

Download Large Event Log Files Using cURL with REST
You might have some event log files that are larger than your tool can handle. A command line tool such as cURL is one method to download files larger than 100 MB using the SObject Blob Retrieve object.
curl https://***yourInstance***.salesforce.com/services/data/v32.0/sobjects/EventLogFile/0AT30000000000uGAA/LogFile
-H "Authorization: Bearer token" -H "X-PrettyPrint:1" -o ~/downloads/outputLogFile.csv

For more details, check the Trail Head Module

follow me @ramsujesh

Design resource in lightning component

By Sujesh Ramachandran 1/01/2017 2 comments:

2017 begins, and I thought somehow should publish an article on the first day to keep the momentum going well. Here is the an out of box way to pass the attributes to the lightning component from app builder. Lets take an example to configure the theme color of a component and the theme color could be provided by an admin user who configure the lightning component in the app builder.

ThemeColorConfigure.cmp is the component we are going to create and when an admin drag and drop this component into app builder, admin will get an option to configure the theme color of the component. After drag and drop the component, admin could enter the color name or code in to the right panel for the attribute "Theme Color". Based on the Theme color the component theme color will be displayed.

Lets jump into the technical part of ThemeColorConfigure.cmp. we have created an attribute 'ThemeColor' in the ThemeColorConfigure.cmp. Also, to expose this attribute to the app builder, we have created the ThemeColorConfigure.design wherein we have mentioned the 'ThemeColor' attribute and the label name(display name) for app builder.

Use a design resource to control which attributes are exposed to the Lightning App Builder. A design resource lives in the same folder as your .cmp resource, and describes the design-time behavior of the Lightning component—information that visual tools need to allow adding the component to a page or app.

Also, ThemeColorConfigure.design can also be used to configure the display name of the ThemeColorConfigure.cmp in app builder using the attribute 'label' for the design:component . In this example, I have given as 'Theme Color Picker', so that the name will be displayed under the available custom lightning component list.

Here is the code of the above example:

Here is the screenshot of the app builder looks like while trying to add the ThemeColorConfigure.cmp to configure the theme color value.

Some more information about design resource of a lightning component

1) As of now a design resource supports only attributes of type int, string, or boolean.
2) To Render a field as a picklist, , add a datasource onto the attribute in the design resource, like this

3) You can set a default value on an attribute in a design resource, like this

4) Restrict a component to one or more objects
Use the sfdc:object tag set to specify which objects your component is valid for.
For example, in the above example let's restrict the lightning component to only Account object by adding the below code

follow me @ramsujesh

Salesforce Spring 17 Release Lightning features

By Sujesh Ramachandran 12/25/2016 3 comments:

Spring 17 release note is out, I am just curious to know what is in for specifically lightning. Lets have a quick look into the interesting new features in lightning and few other features as well.

Assign Record Pages by App, Record Type, and Profile
Now you can customize your user experience even more granularly by creating custom record pages and assigning them by app, record type, and user profile. Give your sales managers a different view of opportunities than your sales reps. Also the page activation process has been revamped, now activate a page as the org default, app default, or for the most granularity, assign it to a combination of apps, record types, and profiles all in one place.

Add the Related Record Component to Your Lightning Pages
Use the Related Record component to customize your Lightning pages and display the details of a related record, including the parent record, on any record page.

Add the Related List Component to Your Lightning Pages
Instead of displaying all the related lists for a record, you now get to pick exactly which list you want with the new Related List component. Instead of displaying all the related lists for a record, you now get to pick exactly which list you want with the new Related List component.

Customize How Related Lists Display on Lightning Pages
Use a new attribute on the Related Lists component to choose whether to display related list items in a list or as tiles on your custom Lightning Pages.

Power Up Your Lightning Pages with the Flow Component (Beta)
Use the Flow component to embed active flows in your Lightning Page. This release contains a beta version of the Flow component for Lightning Pages, which means it’s a high-quality feature with known limitations. The Flow component isn’t generally available.

Add Skype to Lightning Record Pages (Beta)
A new Skype for Business component is available for the Lightning App Builder. To get the Skype standard component in App builder, you need to first activate Skype for Salesforce from Setup->Skype for Salesforce and authorize using your skype account. Add it to your record pages to get Skype controls that let you see who's online, initiate audio and video calls, and chat. To add this component, Skype for Salesforce (Beta) must be set up for your org.

Use the Lightning Design System in Visualforce Pages
Use the apex:slds element to incorporate the Lightning Design System in your Visualforce pages and align them with the styling of Lightning Experience. This component is an alternative to uploading the Lightning Design System as a static resource and using it in your Visualforce pages. In general, the Lightning Design System is already scoped. However, if you set applyBodyTag or applyHtmlTag to false, you must include the scoping class slds-scope. Within the scoping class, your markup can reference Lightning Design System styles and assets. To reference assets in the Lightning Design System, such as SVG icons and images, use the URLFOR() formula function and the $Asset global variable.

Reference Lightning Design System Assets with the $Asset Global Variable
Use the $Asset global variable to access images, sprites, and other assets that are part of the Lightning Design System. Use it in Visualforce pages that also use the component. Use $Asset instead of $Resource. The variable takes dot notation and SLDS. For example, this markup references a JPG avatar in the Lightning Design System.

Console Apps: Now in Lightning Experience
Console apps are now available in Lightning Experience. Create console apps for your users to let them view multiple records on one screen and easily access utilities and the critical record details they need—all in Lightning Experience. Lightning console apps are available only to Sales Cloud and Service Cloud users. To prevent unexpected issues, don't give other users access to Lightning console apps. Previously, the console was only available in Salesforce Classic.

Enhance Your Lightning Apps with the Utility Bar
The utility bar gives your users quick access to common productivity tools, like Notes and Recent Items. It appears as a fixed footer that users can access to open utilities in docked panels. Under the covers, utilities harness the power of Lightning components. You can add a utility bar to any Lightning app, including standard and console apps. Previously, you could only add or customize a utility bar using the API. For those who are thinking what is a utility bar? Lightning Experience allows you to add your components to prime real estate in any Lightning app so that your users have one-click access to powerful productivity tools. Now, you can access those same productivity tools in a horizontal footer, called the utility bar.

Custom Lightning Components: Develop for Communities

Use the Lightning Component framework to build custom components for Communities.

Write Once, Reuse Everywhere: Support for force:hasRecordId

Lightning components that implement the force:hasRecordId interface now work seamlessly in Community Builder. The force:hasRecordId interface makes a component context-aware by adding the record ID from the component’s page to the component at runtime. Previously, the force:hasRecordId interface was supported in Lightning App Builder and Salesforce1 only. Now it’s supported in communities as well. If you already created components that implement the interface, you can use them in Community Builder.

Access Lightning Apps in Public Communities
Add the ltng:allowGuestAccess interface to your Lightning app to make it available to users without requiring that they register with or log in to your community. This interface makes your Lightning app available to more people, with fewer barriers to using it.
Once you’ve enabled your app for guest access, your app is available as a stand-alone Lightning app at the following URL:
https://yourCommunityDomain/communityURL/namespace/appName.app.
Stand-alone Lightning apps don’t display any Salesforce branding, nor do they use your community template. You have complete control over the visual design of a stand-alone app.

For more detailed information, please go through the official release notes from Salesforce Release Notes Spring '17

Follow me @ramsujesh

How to get most out of Lightning Component Action?

By Sujesh Ramachandran 12/18/2016 4 comments:

Here is a blog talks about configuration and how to create actions which appears under detail page of a record to show custom lightning component. Lets see how to configure a lightning component as lightning component action. You can add Lightning component actions to an object’s page layout using the page layout editor. If you have Lightning component actions in your org, you can find them in the Salesforce1 & Lightning Actions category in the page layout editor’s palette. On Lightning Experience record pages, Lightning component actions display in the page-level action menu in the highlights panel.

Lightning component actions can’t call just any Lightning component in your org. For a component to work as a Lightning component action, it has to be configured specifically for that purpose and implement either the force:LightningQuickAction or force:LightningQuickActionWithoutHeader interfaces.

Lets see how to create a lightning component and configure as lightning component action. Now lets create a lightning component "CustomLightningAction.cmp", you could see that the component implements an interface force:LightningQuickAction so that the lightning component will be available to select while creating a action under object setting. Below is the sample code to create a lightning component for lightning component action. In the below component there is a "ShowToast" and "Close" button. On click of showToast, we could easily show toat with the standard events, similarly on click of 'Close' to close the popup, lightning provide close quick action events to close the popup from our end.

Now lets create a lightning component action and configure in Account object. For this :

1) Go to Buttons, Links, and Actions Section under the Account Object Setting Page(Settings - Edit Object)

2) New Action and create a lightning component action as below

Lets see the output now:

Lets see now how the above compoent looks like in case implemented from force:lightningQuickActionWithoutHeader. In this case, the header has to be programaticaly build from our end. Here is the updated code of 'CustomLightningAction.cmp' without header.

Now lets see how the component looks like in case of no standard header.

Follow me @ramsujesh

How to Identify lightning component is added from app builder or not?

By Sujesh Ramachandran 12/13/2016 1 comment:

Here is a simple trick to identify whether an lightning component is added from App Builder View or referred from any other place(i.e. lightning tab) other than app builder. Just assume that the component is rendering in an app builder view and if you want to make any change specifically for app builder view. For example if you want to reneder component in one column layout in app builder view and if the component is not rendering in app builder view, and want to render the component in 2 column layout, you could use the design attributes (design:attribute) in salesforce.

Now lets see an example here, I am going to create a component which renders as one column in app builder view and 2 column in normal view(example for normal view could be lightning tab). AppBuilderCheck.cmp is the component below which has an attribute isAppbuilderView, default set to false.

Now lets create a Appbuilderview.design to expose an attributes to the app builder. Using design attributes you can provide provision to admin to set configurable values while setting up the app builder view. You can use these configurable values to design the behaviour of the components based on the inputs from design attributes. Now here we are going to set the default view of design attribute "isAppbuilderView" to true. Setting the default value make sure that while admin drag and drop this component to the app builder by default shows true, so that admin dont have to configure manually. So if this component render from app builder view, we get isAppbuilderView as true otherwise if the component render in an lightning tab then we get isAppBuilderView as false as the default setting in design attribute will be effective only if the component render from app builder view.

Screenshot of the component from App builder view and lightning tab view:

From App Builder - One Column Layout

From Lightning Tab - Two Column Layout

Follow me @ramsujesh

Lightning components development becomes faster with out of box lightning components

By Sujesh Ramachandran 12/11/2016 3 comments:

Last few blogs was on custom functionality and I thought should write on out of box components in Lightning framework. When we started development on lightning framework some months back, we had to develop few components from scratch which are available in platform now. we will just go through few out of box lightning components which makes development on lightning framework much faster.

Lightning Icon - lightning:icon
Lightning icon makes it easier to add SVG to your lightning components. You could specify IconName, class, size and variant(warning, error), alternative text and body.

Lightning Tabset and Lightning Tab - lightning:tabset & lightning:tab
Lightning Tabset is parent for lightning Tab. As most of you already know that we can accommodate multiple tab into tabset. we could pass variant(default, scopped), onSelect event, Id, class and body to the lightningning tabset. Lightning tab will be child of lightning tabset, we could pass few events like onblur, onfocus. Also, can customize the label like Icon with description etc. Possible attributes are body, tabindex etc.

Lightning Button Menu and Menu Item - lightning:buttonMenu and lightning:menuItem
Button Menu represents a drop down menu which the component itself will take care of the javasript to show or hide the menu, the event handling part. Many attributes available to customise the out of box component like class, iconName, iconSize, menuAlignment, title, value , events like onblur, onfocus, onselect. You can use the visible attribute to open and close the menu from controller/Helper.

A lightning:menuItem is a menu item within the lightning:buttonMenu dropdown component. It can hold state such as checked or unchecked, and can contain icons. You can customize the styling using the class attribute. You can create menu items that can be checked or unchecked using the checked attribute in the lightning:menuItem component. Other possible attributes are iconNmae, label, title, value and events like onblur, onfocus.

Lightning Spinner - lightning:spinner
Displays an animated spinner. This component can be used when retrieving data or anytime an operation doesn't immediately complete. The variant attribute changes the appearance of the spinner. The default spinner color is dark blue.

There are many components available in the framework like lightning:button, lightning:button:group, lightning:buttonicon, lightning:textarea, lightning:select, lightning:formatteddatetime, lightning:formattednumber, lightning:layout, lightning:card etc. If you want to know more about it, then refer the link Aura Component reference

Screenshots:

Lightning Icon

Lightning Tab

Lightning Menu

Lightning Spinner

Follow me @ramsujesh

Pass parent component controller method reference to child component

By Sujesh Ramachandran 12/03/2016 2 comments:

Just a month to go for new year '17 and wanted to somehow keep my technical stuffs improving, so here is a technique to pass a method reference to a component as attribute.

Assume that you have a 'Parent Component', from Parent Component we are calling a child component to do something, after the child component execution, if you want to do any action like refresh the parent component, then we could use this technique to pass the reference of parent controller method to the child component and execute the parent controller method from child controller/helper methods. Even you could pass param to the parent component controller method from child component controller method.

So now lets see with an example how to pass the reference of parent component controller methods to the child component and execute the parent component controller method from child component helper methods. For this we are going to create a parent component which will have a button. On click of button, will show child component(modal popup). on click of 'ok' button in child component, will show a message in parent component, wherein message is passed from child component.

In this example I am passing just a string to the parent component from child component, but you could pass any data type supported by aura:attrubute in lightning.

Here is the output:

Screenshot 1