Dynamically Creating and Destroying Lightning Button(ui:button)

Sometimes it is required to create the lightning component at run time and destroy them. For example you can create a modalDialog box which display different messages to user. So while performing any operation like deleting records, you want to display message saying deleted successfully of not able to delete due to some error, then you can create the modalDialog box dynamically and destroy it.

In order to create any lightning component dynamically, you can use $A.createComponent() to instantiate a component. This function take 3 parameters mentioned below:

1.  type (String) :Type of component to create like lightning:button, lightning:component etc.
2. attributes : Map of all parameters required for new component.
3. callback function: Once the component is created, this callback function will be invoked.This function can be used to append newly created component to target component. You can place the newly created component inside some div to display.

For Demo purpose, I will be creating a lightning component in which we will create lightning buttons and destroy them dynamically. Below is component, controller and app code for this:

Explanation:

Whenever user clicks on create button, controller will create new button dynamically and append it in <Div/> tag. Controller always checks for v.body which returns the body of component and will check the length of body and append label to new button.


How to Destroy any component dynamically

You can simply fetch the body of lightning component and set it to blank array.
In above example, in order to delete all buttons present in div tag, we find the div tag with aura:id and set the body as blank array.

component.find("newTag").set("v.body",[]);

In order to remove all content of any components, simple set the v.body to blank array.

var bdy = component.get("v.body");
bdy .set("v.body",[]);

How to specify the dependencies when you are creating a custom component dynamically

Suppose you have created a custom component like c:myCustomDialog and you want to create is dynamically and want to use in component say c:listComponent then you have to specify the c:myCustomDialog componet as a dependent component inside c:listComponent. This will ensure that the component and its dependencies are sent to client when its needed.

below is code snippet which we need to specify in c:listComponent component:

<aura:component>
                 <aura:dependency resource="markup://c:myCustomDialog"/>
</aura:component>

<aura:dependency> tag supports following attributes:

• resource : specify the dependent component which you will create dynamically
• type : type of resource component depends on. It can be COMPONENT, APPLICATION, EVENT. The default value is "COMPONENT".  You can specify type="*" to match all type of resources.

Hope this will help you all understand the basic of creating and destroying the components dynamically.

Looking forward for your comments and feedback!!!!

More Blogs>>: 

RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
FETCHING FILE FROM EXTERNAL/PUBLIC URL AND STORING IT IN SALESFORCE    

Fetching file from external/public URL and storing it into Salesforce

If you have file URL for file stored outside the salesforce, then you can fetch file information from external URL by performing a call out to external system and store the file in salesforce.

For Demo purpose, I have uploaded a pdf file in Google drive and shared it with link with people. Now I will fetch this file and will store it as attachment in salesforce under account record.

File URL-  https://drive.google.com/file/d/0ByXILxflqQ2jWGpNVmI1WW9uYTQ/view?usp=sharing


Below is apex class which will help us to perform this activity:



Now you can run below code in developer console to test this:

//you can specify any record Id where you want to store file as attachment
String RecordId='0019000000ld4kN'; 
String fileContentType='pdf';
String extFileURL='https://drive.google.com/file/d/0ByXILxflqQ2jWGpNVmI1WW9uYTQ/view?usp=sharing';
blob fileBlob=FileDownLoadUtility.fetchFileFromExternalUrl(extFileURL);
Id attachmentId = FileDownLoadUtility.createAttachment(fileBlob, RecordId , fileContentType);
system.debug('*****attachmentId:'+attachmentId);

Note: 

• If you are trying to fetch file from external source which is authenticated, then pass authorization parameters in HTTP Request headers
• You should specify the file content type before creating attachment in order to properly view file.
• You can add additional parameter as fileName in "createAttachment" method, if you you want specify the attachment name while creating attachment.

While trying above code you may get below error:

For this you need to add external URL in Remote Site Settings. For this example, I have added "https://drive.google.com/" in remote site settings.

More Blogs>>: BOX AND SALESFORCE INTEGRATION    

INTEGRATING BOX FILE PICKER WITH SALESFORCE
REST API TUTORIAL FOR SALESFORCE

Integrating Box File Picker with Salesforce

Box File Picker allows to view content present in box folders and to integrate it with other application. Suppose we want to display the box folder contents for user from salesforce UI, then we can use javascript code snippet provided for box file picker.

Box File Picker allow your users to share their Box content with your application — without using OAuth!

Now we are going to use below code sample to implement this in Salesforce. In order to use Box File Picker, you need Client Id or API Key.
Navigate to your box application and click on Edit Application button.

Suppose your URL is -https://app.box.com/developers/services/edit/133000

Then Client Id is 133000

Below is VF Page Code


Explanation about different attributes in Box file picker:

• linkType : The type of link. Can be direct or shared. 
• shared : Allow you to select folder as well as file inside folder. Shared also allow you to specify the access type of file or folder like people with link, people in your company or people with access to folders
• direct : Allow you to select only files not folder.
• multiselect : true or false.
• true: will get checkboxes for multiple file selection
• false: will get radio button for single file selection

Callback & Responses from Box File Picker

Below javascript functions helps in integrating Box file picker with your application:

// Register a success callback handler
boxSelect.success(function(response) {
    console.log(response);
});
// Register a cancel callback handler
boxSelect.cancel(function() {
    console.log("The user clicked cancel or closed the popup");
});

Details about callback functions:

• Success function : Whenever user select files or folders, response is passed as JSON in sucess callback handler.
• Cancel function : This function will be called whenever user click cancel or close the box file picker

Below is sample JSON response which we will get in success callback function for shared link type:

[

    {

        "url" : "https://app.box.com/s/jxi6hcwcvvbbccjka6k8ewhi3",

        "name" : "Happy Time",

        "access" : "collaborators",

        "type" : "folder",

        "id" : 100344004694

    },

    {

        "url" : "https://app.box.com/s/jdfaddssdc234232df123aad",

        "name" : "The Sunil Kumar.docx",

        "access" : "collaborators",

        "type" : "file",

        "id" : 1000000344

    }

]

How to fetch files from Box and store it into salesforce

You can pass the JSON to controller method using javascript remoting and parse JSON to find out file and folder information. JSON response return the file URL which can be used to get file details by doing callout and storing it as attachment in salesforce.

Please refer Fetching File from External/Public URL for more details on this.

More Blogs>>:  FETCHING FILE FROM EXTERNAL/PUBLIC URL AND STORING IT IN SALESFORCE    

BOX AND SALESFORCE INTEGRATION
ACCESS TOKEN USING OAUTH 2.0 IN SALESFORCE
REST API TUTORIAL FOR SALESFORCE