LET'S LEARN TOGETHER. THE BEAUTIFUL THING ABOUT LEARNING IS NOBODY CAN TAKE IT AWAY FROM YOU.

"Lightning Design System" Series || Part 1 || Introduction and Setup your environment to build Visualforce Page with Lightning Design System


The Salesforce User Experience team has come up with a great UI framework called Lightning Design System. The intention is to build application, visualforce pages with this framework which will comply with the new Salesforce lightning look and feel. And the best part is that you don't need to play with CSS.

Now you probably started thinking why I should go for this new Lightning Design System when I have Twitter Bootstrap or Foundation with which also I can achieve the same. The reason is very simple and they are as follows -
  • With the use of this new Lightning Design System, your application or visualforce page will comply with the new Salesforce look and feel.
  • It is a new design system and it is getting improved every day. So as long as you are referring the latest version of design system, you are getting most out of this new framework.
  • The CSS is fully namespaced with slds- prefix which will avoid CSS conflicts.
Ingredients of the Framework:
Salesforce Lightning Design System framework comes with four types of resources.
  • CSS Framework: This will contain UI components, such as page headers, form elements, buttons, grid layout system. This will come up with a single purpose helper class which will assist with spacing, sizing and other visual adjustments.
  • Icons: Includes action, custom, standard and utility icons both in PNG and SVG format.
  • Font: Salesforce designed a new font - Salesforce Sans font. This font is available here.
  • Design Tokens: These are simple variables which will help you design pages, application matching your brand. 
Usage of the Framework:
You can use this framework in -
  • Visualforce pages. (You don't need Lightning Experience enabled in your org for this).
  • Lightning pages and components
  • Mobile apps.
  • Standalone web apps.
Ok enough of theory.

Let's start preparing our environment, so that we can play around.
Before we even start we need to install Lightning Design System as static resource. To use this framework in visualforce page, you need to create a CSS file with a custom scoped outer wrapper. Don't worry. Salesforce comes up with CSS Customizer tool for this. You can use that by following the below steps -
  • Click on Design System CSS Customizer Tool.
  • Choose the Salesforce release and scoping class. You need to remember the class name as you are going to refer the same during visualforce page development.
  • Once done, upload the zipped file as static resource in Salesforce. Please name it SLDSXXX where XXX is the version. The day when I am writing this blog post, the latest version is 2.0.3. So my static resource name is SLDS203.
  • Done.
Let's write our first Visualforce page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <head>
            <title>Salesforce Lightning Design System Trailhead Module</title>
            <apex:stylesheet value="{!URLFOR($Resource.SLDS203,'assets/styles/salesforce-lightning-design-system-vf.css')}"/>
        </head>
        
        <body>
            <div class="suddeb">
                <p class="slds-text-heading--label slds-m-bottom--small">
                    Salesforce Lightning Design System Trailhead Module
                </p>
            </div>
        </body>
    </html>
</apex:page>
After saving this visualforce page, if you execute, you will see that the look and feel in as per the new Salesforce look and feel. Awesome.

Let's now understand the important stuffs here -
  • Line# 3: To use Salesforce Lightning Design System, you need to make sure that you are including the below attribute in html tag, which will enable support for SVG icon sprite maps within Visualforce.
  • Line# 2: We are turning off header, sidebar and built in stylesheet. With this turned on, you can't add extra attribute in html tag(specified above), which means SVG will not be supported.
  • Line# 6: This is the step/way how you are including lightning design system stylesheet from static resource. This is very important to make sure lightning design system CSS stuffs are available in your visualforce page.
  • Line# 10: To use Lightning Design System markup in visualforce page, it should be placed inside an outer wrapper
    with scoping class you created using CSS Customizer tool. In my case,  the name of the scoping class is: "suddeb". 
  • Don't worry about Line# 11 for the time being. I will explain the same in my next post.
Great. So we have created our first visualforce page with Lightning Design System. In my next post, I will get into more details. Till then, please provide your feedback. Thanks.

Share:

Apex Debugger || All you need to know || Advanced Configuration

This post is in continuation of my previous post where I have explained the basic configuration of Apex Debugger. If you haven't gone through that, I would request you to please go here.

So with the assumption that you have configured Apex Debugger correctly and can do debugging, in this post, I will explain some advanced configurations which you can do with Apex Debugger.

So let's start -
  • Choose for which user you want to enable the Apex Debugger - You can choose the user for which you want to enable the Apex Debugger. For that open Debug Configuration. Then check the Whitelisting Enabled and Use SOQL where clause option. Then put the where clause. For example in the below screenshot, I have put the ID of the user and clicked on the Query button 
  • Choose the request type - With this option you can select the request type for which you want to enable the Apex Debugger. Currently we can enable Apex Debugger for the below options - Execute Anonymous, Inbound Email Service, Invocable Action, Lightning/Aura, Quick Action, REST, Run Tests Synchronous, SOAP, Synchronous, Visualforce, Visualforce Remote Method. If you don't choose anything, it means it is enabled for all the above types of requests.
  • Choose Entry Point - With this option, you can choose the entry point. For example if you want to enable Apex Debugger for particular Visualforce page, you can put .*/apex/DemoPage.apexp
Let's check out the above mentioned advanced configurations with one example.

Use case: Create a VisualForce page where accounts can be selected by lookup button. Once an account is selected, all the associated contacts will be displayed.
Implementation:
Here is the VisualForce Page -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<apex:page standardController="Contact" extensions="SudiptaDeb_ContactList_Demo" showheader="false">
<apex:form >
 <center>
  <br/><br/>
        <apex:outputLabel value="Account Name"> 
   <apex:inputField value="{!Contact.AccountId}" required="false" id="lid">
    <br/><br/><br/>
           <apex:actionsupport event="onchange" rerender="check"/>
         </apex:inputField>
        </apex:outputLabel>
        <apex:outputPanel id="check">
      <apex:outputLabel value="Contacts:" rendered="{!contact.AccountId!=null}">
           <apex:selectCheckboxes value="{!selectedAccount}">
              <apex:selectOptions value="{!items}"/>
          </apex:selectCheckboxes><br/>
         </apex:outputLabel>
        </apex:outputPanel>
 </center>
</apex:form>
</apex:page>
Here is the controller SudiptaDeb_ContactList_Demo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
public with sharing class SudiptaDeb_ContactList_Demo {
 public contact selectedAccount{get;set;}
  public SudiptaDeb_ContactList_Demo(ApexPages.StandardController stdCtrl) {
  selectedAccount=(Contact)stdCtrl.getRecord();
  }
  public List<SelectOption> getItems(){
       List<Contact> cntList=[select Name from Contact
              where AccountId=:selectedAccount.AccountID];
       List<SelectOption> options = new List<SelectOption>();
        for (Contact c:cntList){
   options.add(new SelectOption(c.Name,c.Name));
        }
        return options;
 }
 }

Debugging:
Now what I will do here are mentioned below -
  • I will give my User ID in the Debug Configuration | Whitelisting Enabled section to make sure only my requests will be considered for Apex Debugging. With this option, if someone else is working in the same Sandbox, their requests will not be tracked here.
  • I will select VisualForce under request type because I am only interested to debug when the execution will trigger from VisualForce page. My intention is that I will do some activity in the VisualForce page and I would like to debug the Apex controller code.
Here is the screenshot of all the configurations -

Now in the controller, I will put breakpoints @ line # 4, 7 and 13. After that with Debugger session on, when I will select an account in the VF page, the execution will stop at the breakpoints. Below is the screenshot -

So now I can debug my controller by starting the execution from VisualForce page. With this example, I believe you will feel more comfortable to play with other supported request types. Go ahead. It's all yours. 

Lastly I would like to inform you about few limits and considerations.
Apex Debugger Limits -

Apex Debugger Considerations -
Click here

Please let me know your feedback. Thanks in advance. Happy Salesforce Debugging!!!
Share:

Apex Debugger || All you need to know || Basic Configuration

Finally, Salesforce brings Debugging feature. I was waiting for this one for a long time and I am quite sure that many other developers like me also waited for this one.

Today in this post, I would like to explain how you can use this feature and make your Salesforce developer life more powerful.

Before I start, I would like to mention that this feature is not available in Developer orgs, it is only available in Sandboxes. You need to contact Salesforce to enable this feature in your Sandboxes. There is cost involved in getting this one enabled. To know about the cost, please contact Salesforce.

With the assumptions that you have enabled this feature in your Sandbox, you need to setup your Sandbox as well as your Eclipse workplace. Below are the steps mentioned in Salesforce guide -

Setup Sandbox for Apex Debugger -
Setup Force.com IDE -
  1. First you need to Install or Update Force.com IDE plugin as instructed below -
  2. Once done, create a Salesforce project as instructed here. Note - Make sure you mark your Eclipse project as work online.
Setup Eclipse Debugger -
This is the most important step where you need to setup your Eclipse Debugger. To do that -


  1. Click on the Debug Icon in the toolbar and select Debug Configuration
  2. Select Remote Apex Debugger
  3. Click on the New Launch Configuration Icon
  4. Give some name of your configuration
  5. Click Browse and select your project
  6. Click Apply, and then Debug.
Once you are done with the above steps, your basis setup is done and you are ready to use Apex Debugger. So let's use now.

I have created one very basic Apex class to start with. The code is below -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
public with sharing class SudiptaDeb_ApexDebug_Demo {
 public void method1(String str){
  method2(str);
 }   
 
 private void method2(String str){
  String strToBePassed = 'String from method1: ' + str;
  method3(strToBePassed);
 }
 
 private void method3(String str){
  String strToBeDisplayed = 'Final String: ' + str;
  System.Debug(strToBeDisplayed);
 }
}
Now let's follow the below steps to do the debugging -
  • Setup breakpoint @ line # 3, 7 and 12. Intention is that we will see the values of the variables during the execution flow. You can setup breakpoint by double clicking on the line numbers
  • Open the Debug perspective by choosing Window | Open Perspective | Other | Debug
  • Click on the Debug icon and launch the new debug configuration (created earlier) You will get yellow gear icon indicating that your debug session is ready. 
  • Let's execute the below code from Developer console's Execute Anonymous Window -         new SudiptaDeb_ApexDebug_Demo().method1('Sudipta Deb');
  • Once you start that you will see that in Eclipse the executing is waiting at your first breakpoint as shown below -
  • Watch the value of the variable as shown below - 
  • Click on Step Over icon you will see the execution is now moved to second breakpoint. Watch for the value now as shown below - 
  • Again click on Step Over icon you will see the execution is now moved to third breakpoint. Watch for the value now as shown below - 
If you are able to do the above steps and see the results, it means you have Apex Debugger setup correctly and you now have the power you need in your hand. 

Great!!! In my next post, I have explained some of the more advanced features of Apex Debugger. Till then, feel free to post your comments and let me know how you feel about this great feature from Salesforce. Have a nice day. 
Share:

Summer'16 New Feature || Create your own calendar from any object


Salesforce Summer'16 release is a milestone release for Salesforce as it is their 50th release. But apart from being the 50th release, there are many reasons for considering this release as the milestone release. In this release, Salesforce brings some of the really key features which are really awesome.

In this post, I am going to discuss about the new feature called - Creating Calendar from anything in Salesforce.

Really!! Yes, as the name suggests now you can create a calendar from any object in Salesforce. As long as you have some date fields present in the custom object, you can create calendar from that object. This feature is available in Lightning Experience only and available in Enterprise, Unlimited and Developer edition.

But to understand why we need calendar let's give you an example. Say you are working with opportunities. So from the list view - "All Opportunities", you can get the details about the closing date of the opportunities. But it's still in the list view showing the details in rows. But think if you can get a visual calendar representation of the same information, it will have more powerful impact as well as give you the information more quickly. From the calendar, you can easily identify which opportunities are closing this day, or this week, or this month. So yes, this is really a cool feature introduces by Salesforce.

So without any further delay, let's discuss about different options available while creating the calendar with some example. Follow the below steps to create calendar (in this example, I am creating calendar from Opportunity object showing the closing date of the opportunities).  

Step 1:
Once you are in Lightning Home Page, go to Calendar from Navigation Panel

Step 2:
Click on New Calendar Option as displayed below in the screenshot.
Step 3:
This is place where you can select the object for which you want to create the Calendar. So for our example, let's select Opportunity object and click next.
Step 4:
Now below screen is the most important one. Here you can select -
  • Calendar Name:  Very much self explanatory, the name of your calendar.
  • Field for Start:  This field will decide where to put the entry of your record in the calendar. Here you can choose either Date type or Date/Time type field. If you choose Date type field, calendar entry will show full day event whereas if you choose Date/Time type field, calendar entry will be exactly on the same date and same time.
  • Field for End: This is an optional field. This will decide how long the calendar entry should be like calendar entry end time. Here you have to select same type of field i.e. either Date or Date/Time type which you have selected in Field for Start.
  • Apply a Filter: This will decide your calendar will work on which list views. You can select available list views from the object.
  • Field Name to Display: This will decide what will be displayed in the calendar entry.
So for our example where we want to display Opportunity closing information in the Calendar, choose the below values as shown in the below screenshot -


We are done. Our calendar is ready. Let's see how it looks now -

Note - The color of your calendar will be same as configured in the object.

So now what do you think? Don't you think it is a great feature. 

There are few considerations while creating calendar also, but I would like to highlight one consideration here which is the limit of 150 calendar entry in day or week view including all your calendars and Salesforce events. If you have more than 150 calendar entries in the selected calendar, Salesforce Lightning system will show you an alert message and hides entries from other calendar.
 You can go through the other considerations here -
https://help.salesforce.com/apex/HTViewHelpDoc?id=calendar_create_limitations.htm&&language=en_US

I request you to try this out in your developer org. Please provide your comments. Thanks.
Share:

Salesforce Lightning Component - Application Event

In continuation to my previous post about component event in Salesforce Lightning, today I would like to discuss about the another type of event i.e. Application event.

Application event in Salesforce Lightning follows publish-subscribe model. An application is fired from an instance of a component. All components that provide a handler for the event will be notified once the event is fired. Below diagram will give you a more clear picture -

As the above diagram tells - Component 1 is firing the event and that information is getting passed to Salesforce framework. Now all the events - Component 2, 3, 4 & 5 are already registered as handler of this event. So it is now Salesforce framework who will notify all these components that the event has occurred. Here you can see that all the components are very much loosely coupled because when Component 1 is firing the event, it does not know or rather it does not care which component is going to handle that event. Similarly when Component 2 or 3 or 4 or 5 will get notified that the event has occurred, they really don't know which component has fired the event. This approach makes that component very much loosely coupled.

Now I will start with few basic and later I will give you an example to understand Application event.

CREATE CUSTOM APPLICATION EVENT:
To create Application event, you need to write the below code -
1
2
3
<aura:event type="APPLICATION">
    <aura:attribute name="name" type="String"/>
</aura:event>
The above code will create an Application event with name as an attribute to the event.

REGISTER APPLICATION EVENT:
A component needs to register for the event if the component wants to fire that event. Below code will be used to register for application event -
1
<aura:registerEvent name="applicationEvent" type="c:applicationEvent"/>
For application event name attribute is required, but not used for application event. The name attribute is only relevant for component event.

FIRE APPLICATION EVENT:
To fire an event, we need to first get the instance of the event in JavaScript and then use the fire() to fire the event. Here is the code -
1
2
3
var appEvent = $A.get("e.c:applicationEvent");
appEvent.setParams({ "name" : "Sudipta Deb" });
appEvent.fire();

HANDLING APPLICATION EVENT:
Use to handle the event. For example:
1
<aura:handler event="c:applicationEvent" action="{!c.handleApplicationEvent}"/>
When the event is fired, the client side controller method handleApplicationEvent will be called.

With this understanding now I will give you an example of application event communication. 
Here I will prepare two different components -
  • Component 1 - ButtonPressed - This component will contain the button and will fire the event on each button pressed.
  • Component 2 - ButtonCountPressed - This component will show how many times the button is pressed. This component will handle the event which will get fired from Component 1 on each button click.
APPLICATION EVENT - ButtonCountEvent:
To start with we need to first create the application event. Here is the code.
1
2
<aura:event type="APPLICATION" description="Fired when a Button is pressed">
</aura:event>

COMPONENT 1 - ButtonPressed:
The component code -
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    <aura:registerEvent name="ButtonCountEvent" type="sudipta:ButtonCountEvent"/>
    
    <div class="slds-page-header" role="banner">
     <div class="slds-media__body">
        <p class="slds-page-header__title slds-truncate slds-align-middle" title="Click and Count">CLICK AND COUNT</p>
        <p class="slds-text-body--small slds-page-header__info">SUDIPTA DEB</p>
     </div>
    </div>
    <div class="container">
        <form class="slds-form--stacked">
         <div class="slds-form--element">
             <ui:button label="Click Here" labelClass="label" class="slds-button--neutral" press="{!c.countButtonClick}"/>
            </div>
        </form>
    </div>
</aura:component>
The controller code -
1
2
3
4
5
6
({
 countButtonClick : function(component, event, helper) {
        var clickEvent = $A.get("e.sudipta:ButtonCountEvent");
        clickEvent.fire();
 }
})
The style code -
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.THIS .slds-button--neutral{
    padding: 10px;
    margin: 10px;
}
.THIS .slds-page-header__title{
    font-size: x-large;
    color: #097FE6;
}
.THIS .slds-page-header__info{
    padding-top: 10px;
    color: #5F9FD6;
}

COMPONENT 2 - ButtonCountPressed:
The component code -
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    <aura:handler event="sudipta:ButtonCountEvent" action="{!c.incrementCount}"/>
    
    <!-- Aura Attributes -->
    <aura:attribute name="count" type="Integer" default="0"/>
    
    <div class="container stds-p-top-medium">
     <div class="slds-notify slds-notify--toast slds-theme--alert-texture">
         <p class="slds-title__title slds-truncate">No of click:</p>
            <ui:outputNumber class="slds-truncate" value="{!v.count}"/>
        </div>
    </div>
</aura:component>
The controller code -
1
2
3
4
5
6
7
8
({
 incrementCount : function(component, event, helper) {
        var count = component.get("v.count");
        count++;
  component.set("v.count", count);

 }
})

FINALLY THE APPLICATION - CountTheTotalClickApp
1
2
3
4
<aura:application >
    <sudipta:ButtonPressed />
    <sudipta:ButtonCountPressed />
</aura:application>

Note - "sudipta" is the namespace used by me. So you need to replace "sudipta" with your org namespace.

Here is the screenshot of the lightning app -

I hope the concept of application event and how to use it is clear now. Please provide your feedback. Thanks.
Share:

Salesforce Lightning Component - Component Event Bubbling Effect

Salesforce Lightning – The Future of Salesforce. Lightning is the collection of tools and technologies behind a significant upgrade to the Salesforce1 Platform. It includes Lightning Component Framework which is used to create reusable components, customize the Salesforce1 App, and also build Standalone apps.

The framework uses the event-driven approach communicate with different components. Event is a notification which will let the world/interested entity know that something happened and now they can take actions accordingly.

In Salesforce Lightning, the interested entity is the components that you develop. The components will register for the events they are interested and will fire if required. And at the same time there will be components who will handle the events when they are fired.

We have two different types of lightning events, as displayed below –
  • Application Event
  • Component Event
In this post, I will try to explain how Component Events are handled in Salesforce Lightning Framework.

Salesforce documentation says, “A component event is always fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that received the bubble event.

I believe this is the best explanation of component event. Later in this post, I will give you an example to explain the bubble effect which I believe is little confusing at this point of time. Let’s wait for some time and I am quite sure once you go through the example below in the post, you will be clear with the component events.

With this agreement, let’s start with few basics:

HOW TO CREATE CUSTOM COMPONENT EVENT:
Below code will create a component event (name: sampleComponentEvent) having one attribute named Country of type String.
<!—Component Event Name: sampleComponentEvent -->
<aura:event type=”COMPONENT”>
 <aura:attribute name=”country” type=”String”/>
</aura:event>

Now to access the parameters of the event, you can use –
event.getParam(“country”);

HOW TO REGISTER CUSTOM COMPONENT EVENT:
A component needs to register for component event if it is willing to fire the event. Below code will register the event sampleComponentEvent.
<aura:registerEvent name=”mySampleComponentEvent” type=”sudipta:sampleComponentEvent />
Note: sudipta is the namespace here. So in your code, you need to replace “sudipta” with your namespace.

HOW TO FIRE CUSTOM COMPONENT EVENT:
To fire an event, you need to first get a reference of the event in JavaScript and then use fire() method to fire the event. Below is the code –
var compEvent = component.getEvent(“mySampleComponentEvent”);
compEvent.fire();

HOW TO HANDLE CUSTOM COMPONENT EVENT:
You need to use <aura:handler> tag to handle custom component event. Below is the code:

<aura:handler name=”mySampleComponentEvent” action=”{!c.handleComponentEvent}” />

Here handleComponentEvent is the name of the JavaScript controller function which will react when the event happens.
With all the above details, let’s go through the below example where I will try to explain the event bubbling effect.

Event – cmpClickEvent:
To start with, let’s create an event – cmpClickEvent.
<aura:event type="COMPONENT" description="Component Click Event" />

Component – clickEventGenerator:
Now the component – clickEventGenerator who will register the above component and also fire the event on button click.
<aura:component >
    <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <!-- Aura Event Registered -->
    <aura:registerEvent name="clickEvent" type="sudipta:cmpClickEvent"/>
    
    <div class="container">
     <form class="slds-form--stacked">
         <div class="slds-form-element">
                <ui:button label="GENERATE EVENT" labelClass="label" class="slds-button--neutral" press="{!c.fireEvent}"/>
            </div>
        </form>
    </div>
 
</aura:component>

And the JavaScript Controller contains the method –
({
 fireEvent : function(component, event, helper) {
             var cmpEvent = component.getEvent("clickEvent");
             cmpEvent.fire();
 }
})

Another Component – clickEventInnerMostComponent:
This component is the handler of the event. Here is the code –
<aura:component >
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <!-- Aura Event Handler -->
    <aura:handler name="clickEvent" event="sudipta:cmpClickEvent" action="{!c.takeActions}" />
    
    <div>
        <sudipta:clickEventGenerator />
    </div>
</aura:component>

And here comes JavaScript Controller code:
({
 takeActions : function(component, event, helper) {
          console.log("Event handled from Inner Most Component: " + event.getName());
 }
})

Another Component – clickEventMiddleComponent:
This is the component which is also a handler of the event. Here is the code:
<aura:component >
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <!-- Aura Event Handler -->
    <aura:handler name="clickEvent" event="sudipta:cmpClickEvent" action="{!c.takeActions}" />
    <div>
     {!v.body}
    </div>
</aura:component>

And here comes JavaScript Controller code:
({
 takeActions : function(component, event, helper) {
           console.log("Event handled from Middle Most Component: " + event.getName());
 }
})

Another Component – clickEventParentComponent:
This is the parent component as well as handler of the event. Here is the code –
<aura:component >
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <!-- Aura Event Handler -->
    <aura:handler name="clickEvent" event="sudipta:cmpClickEvent" action="{!c.takeActions}" />
    <div>
     <sudipta:clickEventMiddleComponent >
          <sudipta:clickEventInnerMostComponent />
     </sudipta:clickEventMiddleComponent>
    </div>

And here comes JavaScript Controller code:
({
 takeActions : function(component, event, helper) {
     console.log("Event handled from Parent Component: " + event.getName());
 }
})

Now the final Lightning App – ComponentEventApp:
The app contains a very basic structure as –
<aura:application >
    <sudipta:clickEventParentComponent />
</aura:application>

Now when you will execute the app and click on the GENERATE EVENT Button, you will get the below output in the console:
Event handled from Inner Most Component: clickEvent
Event handled from Parent Component: clickEvent

Surprised, right? Why not the log is coming from Middle Component?

So now if you see the event cmpClickEvent is bubbled to clickEventInnerMostComponent and clickEventParentComponent. It is not bubbled to clickEventMiddleComponent. The reason behind is that component clickEventInnerMostComponent and clickEventParentComponent are the facet value provider of the event, but clickEventMiddleComponent is not the facet value provider.

A component can be a facet value provider if that component is the outermost component in the markup.

clickEventInnerMostComponent became facet value provider because it is the outermost component in the markup for the component clickEventGenerator which is generating the event. This is defined in the component code – clickEventInnerMostComponent.

Similarly clickEventParentComponent became facet value provider because it is the outermost component in the markup for the component clickEventGenerator which is generating the event. This is defined in the component code – clickEventParentComponent.

But the component clickEventMiddleComponent is not the facet value provider as the code for the component doesn’t contain any reference of the component clickEventGenerator which is generating the event.

Now if you change the code of clickEventMiddleComponent to make sure this component also contains the reference of the component clickEventGenerator which is generating the event like below –

<aura:component >
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <!-- Aura Event Handler -->
    <aura:handler name="clickEvent" event="sudipta:cmpClickEvent" action="{!c.takeActions}" />
    <div>
     <sudipta:clickEventInnerMostComponent /> 
    </div>
</aura:component>

The console output changes to –
Event handled from Inner Most Component: clickEvent
Event handled from Middle Component: clickEvent
Event handled from Parent Component: clickEvent

It indicates that now clickEventMiddleComponent is also the facet value provider of the event.

I hope you understood the event bubbling effect now as this concept is very important and developer should be very clear to the concept. In my next post, I will explain the Application type event.

If you have any feedback/question, please let me know. Your feedbacks are always welcome.
Share:

Sudden Gift from Salesforce Trailhead -- Feeling awesome

 
Share:

Another Important Step - Trailhead Module - Navigate the Salesforce Advantage


Aha!!!. This time I need to review a new Salesforce Trailhead module - Navigate the Salesforce Advantage. This time it is not any more battleship, rather it looks to me Pirate ship. This Pirate ship will navigate us through the sea – The Salesforce Advantage sea.

This trail is for beginners in Admin, Developer, Business User scope. Once you complete this trail, you will be aware of the key differentiator that makes Salesforce unique and successful. At the same time, you will understand Salesforce’s core values, innovative technology, and vibrant ecosystem.

The first module: Salesforce Success Model
This module comes with two submodules. The first submodule – “Getting to Know Salesforce” explains what is salesforce and how salesforce will be benefits for business. The second submodule – “Introducing our Four Core Differentiators” explains the importance of customer success in Salesforce. Here we are having the Salesforce’s 1-1 model of Giving back.

Once you complete this module, you will be awarded with the below badge:

The second module: Salesforce Cloud Benefits
Like the above one, this module also comes with two submodules. The first submodule – “Succeeding with a Complete CRM” explains a very basic questions – Whether Salesforce is an app or a platform? At the same time, this submodule explains how Salesforce’s Complete CRM evolves with customer’s requirements. The second submodule – “Propelling Your Business with the Cloud” explains the basic of cloud computing and why Salesforce decided to do operation in cloud. At the same time, this section explains the benefit that customer receives being in cloud.

Once you complete this module, you will be awarded with the below badge:

The third module: Salesforce Technology Basics
This module comes with 4 submodules. The first sub module “Getting behind the trusted cloud” talks about the trust which Salesforce built to become World’s most trusted cloud platform. Describes Salesforce’s security model and I believe this module is an inspiration to check out Salesforce’s security model implementation. The second sub module “Learning the Value of Multitenancy” explains about multitenancy and the advantages of having this in Salesforce. The third sub module “Understanding the Power of Metadata” explains one of my favorite topic i.e. Metadata. This explains the how flexible the Salesforce platform is due to availability of Metadata, how upgrades can be done seamlessly die to Metadata. The last sub module “Experiencing Fast App Development and Customization” talks about different paths of fast app development and also the components available during fast app development. At the same time, this section talks about the when to go for Customization rather than Configuration.

Once you complete this module, you will be awarded with the below badge:

The final module: Salesforce Ecosystem
This module again comes with two distinct sub modules. The first sub module “Leveraging our Community, Resources, and Events” talks about the success community that Salesforce is having. At the same time, it tells you to get connected to provide/share ideas, answers and collaborate with each other. Sharing is Caring. The second sub module – “Stopping, Collaborating, and Listening” tells about the how as an individual you can connect to Salesforce via a Salesforce MVP, or through a user group or any other mediums.

Once you complete this module, you will be awarded with the below badge:
After completing this trail, I can explain Salesforce in a much better way to my customers. Requesting others also to go through this trail and make yourself comfortable. Again a special big THANKS to Trailhead for this trail.


Share:

Service Console - How to open the detail page by clicking on hyperlink(formula field) in Sub-Tab

This post will explain how to open the detail page in a sub-tab after clicking on the hyperlink.

Recently I faced one problem where I need to open the details page of a record in sub-tab inside Service Console by clicking on the hyperlink.
Normally if you have any lookup field in service console layout, the field will appear as hyperlink and clicking on the link will open the detail record in sub-tab.
But in my case, I need to make a custom formula field with return type as Hyperlink. Making a formula field as hyperlink is very easy and if you add the field in the page layout, that field will appear as hyperlink. But the problem comes when you click on the link. Clicking on the link will open the page in another browser tab, which is a little odd. User may feel that they are thrown out of the service cloud console by clicking on a record.

So to improve this user experience, we need to open the detail page in the sub-tab of service console. Below is the formula field which display “Product Name” in the page layout as hyperlink and clicking on that link will open the product detail page in sub-tab by passing the product id.

HYPERLINK("javascript:
if(typeof(srcUp)=='function') {
srcUp('/" & Product2.Id & "?isdtp=vw');
}"+ " else {
window.location.href='/" & Id & "?isdtp=vw'
}",
Product2.My_Product_Name__c, "_self")

Sharing the information here so that it can help others. Please let me know if you have any better approach to achieve the same.


Share:

Follow Me

Enter your email address:

Delivered by FeedBurner

Labels

Salesforce (105) Apex (47) admin (27) visualforce (21) ADM (20) dev 501 (19) integration (18) learn salesforce (18) 501 (16) lightning (16) javascript (14) SOAP (13) tutorial (11) Certification. (10) Kitchener Developer Group (8) Certification (7) Trigger (7) security (7) test class (7) unit testing (7) Advanced Admin (6) Advanced Apex (6) Sharing and Visibility (6) design pattern (6) developer (6) report (6) salesforce release (6) service cloud (6) trailhead (6) Lightning Experience (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) formula (5) mobile (5) solution management (5) use case (5) JSON (4) Kitchener User Group (4) Lightning Web Component (4) Sales Cloud (4) Salesforce DX (4) Tips (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) event (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) visual studio code (4) Architect (3) Live Chat (3) Online Event (3) Opportunity (3) Performance (3) Products (3) REST (3) Role (3) Salesforce Certification (3) Scratch Org (3) Study Notes. (3) Summer15 (3) Web Technology (3) automation tool (3) dynamic apex (3) license (3) map (3) mapbox (3) release (3) singleton (3) version controlling (3) Asynchronous callout (2) Aura Framework (2) Bulkify (2) Community (2) Data Architecture and Management Certification (2) Devops (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) LWC (2) Lightning Design System (2) Lightning Feature (2) Live Agent (2) Metadata (2) PD II (2) Price Book (2) SOSL (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) VS Code (2) Virtual Event (2) ant (2) basic (2) chatter (2) coding (2) communication (2) configuration (2) console (2) controller (2) documentation (2) dreamforce (2) flow (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) salesforce1 (2) strategy (2) xml (2) Action Plan (1) Action Plan Template (1) Activity Timeline (1) Advanced Currency (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) AppExchange (1) Arrow (1) Article (1) Asynchronous Apex (1) Batch (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Celebration (1) Cheat Sheet (1) Classic (1) Compare (1) Confetti (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) CumulusCI (1) Custom Metadata (1) Custom Object (1) Custom Permission (1) Customer (1) Dated Exchange Rate (1) Decorator Design Pattern (1) Dev Hub (1) Development (1) Diwali (1) EDA (1) ESLint (1) Education Cloud (1) Email (1) FSC (1) Function (1) Future (1) Global Gathering (1) Goals (1) Guest Access (1) Guest Profile (1) Guest User Sharing Rule (1) Guide (1) HEDA (1) Higher Education (1) Household (1) Husky (1) IDE (1) Ideas (1) Improvement (1) KPIs (1) Knowledge Management (1) Large Data Volume (1) LastModifiedDate (1) Manage Currencies (1) Manual Sharing (1) Metrics (1) Multi Currency (1) New (1) New Feature (1) OOPS (1) OWD (1) Omni-Channel (1) Partner (1) Permission Set (1) Person Account (1) Photo (1) Pipeline (1) Platform Developer I (1) Platform Developer II (1) Presentation (1) Prettier (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) Queueable (1) QuickReference (1) Related records (1) Reports (1) Retrieve (1) Role Hierarchy (1) SAL (1) SFDX (1) Salesfor (1) Salesforce Advisor Link (1) Salesforce Labs (1) Salesforce Optimizer (1) SalesforceDx (1) Schedule (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Spring 20 (1) Summer14 (1) Summer16 (1) Summer19 (1) Switch (1) SystemModStamp (1) Timeline (1) Unauthorized Access (1) User License (1) Users (1) Validation Rule (1) Web (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) actionFunction (1) actionPoller (1) actionRegion (1) actionSupport (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Popular Posts

Total Subscribers

Total Pageviews

Contact Me

Name

Email *

Message *