Lightning Known issues

https://success.salesforce.com/issues_index

Get Cookies Data in VF page

<apex:page >


    <script type="text/javascript">

    function validate()
    {
   alert(document.cookie);
    }

    </script>
<!-- Javascript -->

<apex:form id="frm">
    <apex:pageBlock id="pb">
     
   
   
            <apex:commandButton value="Insert" onclick="validate();"/>
       
   
    </apex:pageBlock>
</apex:form>


</apex:page>

The LockerService For Lightning Components

This is an introductory post about a new security feature for Lightning Components called "LockerService (LS)". LockerService uses various technologies and techniques to make Lightning Components secure. It will be available as a critical update as part of Summer '16 and will be enforced in Winter '17

DOM Manipulation Libraries
JavaScript has come a long way in recent years. Many DOM manipulation utilities we couldn’t live without in libraries like jQuery are now standard in the language. Modern frameworks like the Lightning Component Framework also provide abstractions that make jQuery less relevant. For example, let’s say you have to set the value of a score input field to 100.

Using jQuery, you would:

Assign a unique id to the input element
Use a jQuery selector to find the input element in the DOM
Assign the value to that DOM element

====================
// Markup:

<input id="score" />

// Code:

var scoreElement = $("#score");

scoreElement.val(100);
======================


Using the Lightning Component Framework, you would:

Declare a score attribute
Bind the input field to the score attribute
Set the value of the score attribute: the bound input field will automatically display the new value.
view sourceprint?

===================
// Markup:

<aura: attribute name="score" type="integer" />

<input value="{!v.score}" />

// Code:
component.set("v.score", 100);
====================

At a high level, LockerService uses various technologies and techniques that are intended to do the following:

Prevent:

• Components from causing XSS and similar security issues
• Components from reading other component’s rendered data without any restrictions
• Components from calling undocumented/private APIs

Enable:

• Cool new features like client-side API versioning similar to REST API versioning*
• Faster security review
• Better and more secure JS development practices
• Running 3rd party JS frameworks like React, Angular and so on*
• Easily adding or removing new security features and policies

*Some of the features will have limitations and will come during or after Winter 2017 #safeHarbor

Availability

In Winter ’17, LockerService can be activated or deactivated in your org. Note: To ensure compatibility with LockerService before the Summer ’17 release, test your Lightning components in a sandbox or a Developer Edition org.

In Spring ’17, the existing LockerService critical update will tighten Content Security Policy (CSP) to eliminate the possibility of cross-site scripting attacks. These CSP changes will only be enforced in sandbox and Developer Edition orgs. If you have a sandbox or Developer Edition org with the LockerService critical update activated, the stricter CSP will apply when Spring ’17 rolls out. If you deactivate the LockerService critical update before the Spring ’17 release, the stricter CSP won’t be applied.

In Summer ’17, LockerService will be auto-activated for all orgs with no option to disable.

Components Installed from Managed Packages

To control whether LockerService is enforced for components installed from a managed package:

1. From Setup, enter Lightning Components in the Quick Find box, and then select Lightning Components.
2. Select the Enable LockerService for Managed Packages checkbox to enforce LockerService for components
   installed from a managed package.
   Note: The checkbox is only visible when the critical update is activated.

If you deselect the Enable LockerService for Managed Packages checkbox, LockerService is not enforced for
components installed from a managed package. Components that you create in your org still run with enforcement of LockerService restrictions.

Under The Hood

To understand the technology under the hood, let’s take an example app.  The below example Lightning app has four components: a button, a Weather component (that internally has a Map sub-component) and a Financecomponent.

Before LockerService

Before LockerService, the DOM tree and JS access for the example lightning app would look like the following image.

In this scenario:

1. Any JS of any component can call any JS functions of any other component as they are all loaded in the DOM
2. Any JS can also call any undocumented/private Lightning APIs
3. Any JS can access real DOM and get rendered data from other components.
4. Components that are not security reviewed can potentially have security issues.

After LockerService

The same lightning app with all the techniques and technologies used in LockerService will look something like the following image.

With the LockerService turned ON

1. Salesforce-authored components and JS run in “System mode” (similar to the Operating System’s system mode) and have full access to everything.
2. Custom components run in “User mode” and don’t have access to the real Document or real “window” object.
3. Custom components instead gets a custom DOM (“secureDOM”), custom Window and so on.
4. Custom components can access other components’ DOM as long as they are in the same namespace but won’t be able to access other components’ DOM that are in different namespace. For example, JS in the “Weather” component can access DOM of “Map” component, but won’t be able to access DOM elements of the “Finance” or “button” component.
5. In addition, custom components will only be able to access public and documented Lightning JS APIs and won’t be able to access Lightning framework’s “private” APIs.
6. “Use strict” and CSP are enabled and enforced for security of all components.

In Spring ’17, LockerService tightens CSP to eliminate the possibility of cross-site scripting attacks by disallowing the unsafe-inline and unsafe-eval keywords for inline scripts (script-src). Eliminate use of these keywords in your code, and update third-party libraries to modern versions that don’t depend on unsafe-inline or unsafe-eval. These CSP changes are only enforced in sandbox and Developer Edition orgs.

Note:

• When LockerService is activated in sandbox or Developer Edition orgs, you can’t edit rich-text fields and the fields are grayed out. We’re working on removing that limitation in a future release.
• IE11 doesn’t support CSP, so we recommend using other supported browsers for enhanced security.

Additional Resources

1. Lighting Components Developer Guide – More details about LockerService and how it works in Lighting components.
2. Lightning LockerService Video – Get detailed guidance from Salesforce staff.
3. Salesforce Lightning CLI – Use the code review tool to check your code for LockerService compatibility.
4. LockerService API Viewer – Check the DOM APIs exposed by LockerService

Code Example

In the below picture, we have a simple ui:button that uses a div (that’s in “c” namespace) for it’s label. Notice how the console.log differs for window, document and div when LockerService is turned ON. Also notice that when the custom component’s JS tries to “walk the DOM” by doing div.parentNode.innerHTML to get the button’s innerHTML, it gets “undefined” because button is in a different “ui” namespace.

Calling Apex class from lightning component without Base Component

Step 1: create apex class with the name "ApexController" and copy the below code.

=========================================



public with sharing class ApexController {

@AuraEnabled

    public static List<Contact> getContacts() {

        List<Contact> contacts =

                [SELECT Id, Name, MailingStreet, Phone, Email, LeadSource FROM Contact];



        //Add isAccessible() check

        return contacts;

    }

 @AuraEnabled 

    public static List<Lead> getLeads() {

        List<Lead> leads =

                [SELECT Id, Name FROM Lead];



        //Add isAccessible() check

        return leads;

    }

    @AuraEnabled

    public static List<Account> getAccounts() {

        List<Account> Accounts =

                [SELECT Id, Name FROM Account];



        //Add isAccessible() check

        return Accounts;

    }

       @AuraEnabled

     public static List<Contact> getContactsbyName(string name) {

     string nam=name;

        List<Contact> contacts =

                [SELECT Id, Name, MailingStreet, Phone, Email, LeadSource FROM Contact where Name=:nam];



        //Add isAccessible() check

        return contacts;

    }

}





Step 2 : create a component with the name "CallApexclass"

==========



<aura:component controller="ApexController">



    <lightning:card title="Bring Account data">

   

          <aura:set attribute="actions">

   

              <lightning:button label="Acc Data" onclick="{!c.Accdata}" />

          </aura:set>



    </lightning:card>



     <lightning:card title="Bring Contact data">

   

          <aura:set attribute="actions">

   

              <lightning:button label="Contact Data" onclick="{!c.Condata}" />

          </aura:set>



    </lightning:card>



    <lightning:card title="Bring Lead data">

   

          <aura:set attribute="actions">

   

              <lightning:button label="Lead Data" onclick="{!c.Leaddata}" />

          </aura:set>



    </lightning:card>



    <lightning:card title="Bring Contact data with name">

        <lightning:input aura:id="conid" label="Enter Contact Name" />

          <aura:set attribute="actions">

   

              <lightning:button label="Contact Data" onclick="{!c.Condataname}" />

          </aura:set>



    </lightning:card>



</aura:component>

==========================================================

Step 3 :copy following code in the JS controller

==========================================================



({

 Condata : function(cmp) {

        // Load all contact data

        var action = cmp.get("c.getContacts");

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                  console.log('%%%%%%%%%% Contact'+JSON.stringify(response.getReturnValue()));

           

            }

       

        });

   

   

         $A.enqueueAction(action);

    },

        Condataname : function(cmp) {

        // Load all contact data

        var action = cmp.get("c.getContactsbyName");

            action.setParams({name:cmp.find("conid").get("v.value")});

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                  console.log('%%%%%%%%%% Contact'+JSON.stringify(response.getReturnValue()));

           

            }

       

        });

       

       

         $A.enqueueAction(action);

    },

 

    Leaddata : function(cmp) {

        // Load all contact data

        var action = cmp.get("c.getLeads");

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                console.log('%%%%%%%%%% lead'+JSON.stringify(response.getReturnValue()));

           

            }

       

        });

         $A.enqueueAction(action);

    },

     Accdata : function(cmp) {

        // Load all contact data

        var action = cmp.get("c.getAccounts");

     

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                  console.log('%%%%%%%%%% Account'+JSON.stringify(response.getReturnValue()));

           

            }

       

        });

     

         $A.enqueueAction(action);

    }

 

})



===========

Step 4: create App to test it



<aura:Application>



<c: CallApexclass/>



</aura:Application>

Calling apex class from the Lightning component with the Base Utility helper methods

Step 1: Create a base lightning component with the Name "Base"

============================

<aura:component abstract="true">

 {!v.body}

</aura:component>



===============================

step 2: Copy following code in the helper file of above base component and it would be sufficient to make any apex server calls. You dont need to write repeated code again and again to hit the server.



Note: Reason why we are keeping below code in the Helper instead of Component.Js is, we cannot reuse the Component.Js file functions. Only Helper file will be used for re-usability purpose.



===============================

({

    callServer : function(component,method,callback,params) {

        var action = component.get(method);

        if (params) {

            action.setParams(params);

        }

     

        action.setCallback(this,function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                // pass returned value to callback function

                callback.call(this,response.getReturnValue());

            } else if (state === "ERROR") {

                // generic error handler

                var errors = response.getError();

                if (errors) {

                    console.log("Errors", errors);

                    if (errors[0] && errors[0].message) {

                        throw new Error("Error" + errors[0].message);

                    }

                } else {

                    throw new Error("Unknown Error");

                }

            }

        });

     

        $A.enqueueAction(action);

    }

})





=========================================

Step 3: create apex class with the name "ApexController" and copy the below code.

=========================================



public with sharing class ApexController {

@AuraEnabled

    public static List<Contact> getContacts() {

        List<Contact> contacts =

                [SELECT Id, Name, MailingStreet, Phone, Email, LeadSource FROM Contact];



        //Add isAccessible() check

        return contacts;

    }

 @AuraEnabled 

    public static List<Lead> getLeads() {

        List<Lead> leads =

                [SELECT Id, Name FROM Lead];



        //Add isAccessible() check

        return leads;

    }

    @AuraEnabled

    public static List<Account> getAccounts() {

        List<Account> Accounts =

                [SELECT Id, Name FROM Account];



        //Add isAccessible() check

        return Accounts;

    }

       @AuraEnabled

     public static List<Contact> getContactsbyName(string name) {

     string nam=name;

        List<Contact> contacts =

                [SELECT Id, Name, MailingStreet, Phone, Email, LeadSource FROM Contact where Name=:nam];



        //Add isAccessible() check

        return contacts;

    }

}





Step 4 : create a component with the name "CallApexclassCmpBase"

==========



<aura:component controller="ApexController" extends="c:Base">

 

    <lightning:card title="Bring Account data">

     

          <aura:set attribute="actions">

     

              <lightning:button label="Acc Data" onclick="{!c.Accdata}" />

          </aura:set>

 

    </lightning:card>

 

     <lightning:card title="Bring Contact data">

     

          <aura:set attribute="actions">

     

              <lightning:button label="Contact Data" onclick="{!c.Condata}" />

          </aura:set>

 

    </lightning:card>

 

    <lightning:card title="Bring Lead data">

     

          <aura:set attribute="actions">

     

              <lightning:button label="Lead Data" onclick="{!c.Leaddata}" />

          </aura:set>

 

    </lightning:card>

 

    <lightning:card title="Bring Contact data with name">

        <lightning:input aura:id="conid" label="Enter Contact Name" />

          <aura:set attribute="actions">

     

              <lightning:button label="Contact Data" onclick="{!c.Condataname}" />

          </aura:set>

 

    </lightning:card>



</aura:component>

==========================================================

Step 5 :copy following code in the JS controller

==========================================================



({

 Condata : function(component,event,helper) {

 helper.callServer(

            component,

            "c.getContacts",

            function(response) {

               console.log('%%%%%% Contacts data '+JSON.stringify(response));

            }

        );

   

    },

        Condataname : function(component,event,helper) {

  helper.callServer(

            component,

            "c.getContactsbyName",

            function(response) {

               console.log('%%%%%% Contacts by name '+JSON.stringify(response));

            }, {

                name:component.find("conid").get("v.value")

            }

        );

     

    },

 

    Leaddata : function(component,event,helper) {



  helper.callServer(

            component,

            "c.getLeads",

            function(response) {

               console.log('%%%%%% Leads data '+response);

            }

        );

   

    },

     Accdata : function(component,event,helper) {

       helper.callServer(

            component,

            "c.getAccounts",

            function(response) {

               console.log('%%%%%% Accounts data '+response);

            }

        );

    }

 

})

===========

Step 6: create App to test it



<aura:Application>



<c: CallApexclassCmpBase/>



</aura:Application>

Bound and UnBound Expressions

When you add a component in markup, you can use an expression to initialize attribute values in the component based on attribute values of the container component. There are two forms of expression syntax, which exhibit different behaviors for data binding between the components.

Using Delimiter  "{!}"  Makes an attribute as bound and using Hash "{#}" Makes an attribute as unbound.

When ever possible we need to use Hash "{#}" as a best practice which in turn improves performance.

Example:

<!--Bound Expression -->

    <c:ChildExp mynum="{!v.parentattribute}"/> 

<!--Unbound Expression -->

    <c:ChildExp mynum="{#v.parentattribute}"/>

This concept is a little tricky, but it will make more sense when we look at an example.

 ===================

ChildExp Markup

===================

<aura:component >

    <aura:attribute name="mynum" type="String" />

    

    <lightning:card title="Child Card" >

    <lightning:input label="Child input" value="{!v.mynum}" />

        <aura:set attribute="actions">

            <lightning:button onclick="{!c.Bckgrnd}"  label="Check Back ground data" variant="brand"/>

        

        </aura:set>

    </lightning:card>

   

    

</aura:component>

===================

ChildExp Controller

===================

({

Bckgrnd : function(component, event, helper) {

            var mydata=component.get('v.mynum');

        

}

})

===============

ParentExp Markup

================

<aura:component >

    <aura:attribute name="parentattribute" type="String" default=" I like lightning " />

    

    <lightning:card title="Parent Card" >

        

    <lightning:input value="{!v.parentattribute}" label="Parent input"/>

    </lightning:card> 

     <br/>

     <br/>

<!--Bound Expression -->

    <c:ChildExp mynum="{!v.parentattribute}"/> 

<!--Unbound Expression -->

    <c:ChildExp mynum="{#v.parentattribute}"/>

</aura:component>

===============

ParentExpApp to test the scenario

================

<aura:application extends="force:slds">

    <c:ParentExp />

</aura:application>

Initial output

After changing the data in the child input component