Skip to main content

Using Lighting Out with Visualforce

Lightning out is awesome feature and it is correct way of integrating mashups .With lightning out one can easily take lightning components outside salesforce .Some of the examples of system that can consume this includes Heruko , SAP ,Sharepoint and so on .

For external system mashup you will need to first establish connection with SFDC using connected apps .

There is an excellent  session on this topic .

 I have found multiple blogs demonstrating the concept where the lightning component attribute is set from the data inside visualforce .Some of them are as below

Balkishankachawa.wordpress.com/2015/10/31/lightning-component-javascript-remoting-and-visualforce-page/

http://peterknolle.com/lightning-components-in-visualforce/

In this blog we will see how to get the component values out of lightning into our Javascript variable so that we can continue with  more fun of mixing Visualforce and lightning components .

USE CASE :::

My entire Visualforce page used no apex:form and it used pure HTML ,SLDS CSS and Javascript remoting for actions .Now comes the big change in requirement ,need Rich text input field .

I googled to figure if HTML-5 has rich text fields or are there any native solutions without adding the apex:form element and apex:textarea .Introduction of apex:form implies lot of viewstate and makes page slow .

Lightning components interestingly provide "ui:inputRichText"  which is rich text on the webform  .Exciting !!! ..Now comes the challenge of integrating the lightning component into the visualforce and then grabing the set text from the lighting component back into visualforce .

Using lightning out we can integrate a component into visualforce with few lines of javascript .

We will also see how to use the callback function provided to grab the component attribute value back into our visualforce page 

COMPONENT CODE::

If you are familiar with lightning components its 101 of that .A simple component being embedded .

LIGHTNING DEPENDENT APP:

This is similar to declaring dependency just like how we write import statements in java or node.

VISUALFORCE CODE::

The most important part of visualforce code here is way we have declared a javascript variable and pulled the Component into  global variable to access it outside the component and use right away in our visualforce

         var richtext;
             $Lightning.use("c:RichtextApp", function() {
                 $Lightning.createComponent("c:Richtextcmp", {},
                     "richTextEditor",
                     function(cmp) {
                         // do some stuff
                         richtext = cmp;//Very important
                     });

             });

The final screens are below













The console.log clearly prints the what ever is typed in the editor showing how easy it is to get values out of the lightning component.

Popular posts from this blog

TLS 1.0 has been disabled For Sandbox - Salesforce

Salesforce has finally disabled TLS 1.0 in sandboxes .This is in preparation for disablement later in 2017 for PRODUCTION instances .

Now this would have not impacted your integrations in PRODUCTION org but if your integration is broken in your sandbox ,this means you have only few months to sort this and fix before this affects your integration for PROD live users .
Before we deep drive on how to possibly fix this and work with your external systems to figure solution ,lets first understand what is TLS and why did SFDC moved to 1.x and had to disable TLS 1.0
TLS 1.0 Explained























TLS 1.1 Improvements 
Added protection against cipher-block chaining (CBC) attacks. Support for IANA registration of parameters.

Clearly TLS 1.1 is more secure(Compared to 1.0) and protects salesforce resources against CBC attacks .
Identify if this change broke anything .The things that can be affected in your instances are as below Web requests to Salesforce URLs that require authenticationWeb requests to the login pag…

Opening Modal Using Lightning Component Framework of SFDC

One of my friend from India threw a challenge .The challenge was to open a modal by using latest and greatest lightning components framework and modals design from SLDS .For the love of community I thought of sharing the entire code base that I did .

So here we start ..

Business Use Case - Need a handy SalesLeader board component that can be used to display the Sales revenue generated by each sales rep for current year in the order of decreasing total revenue .On click of the tile ,we will show detail opportunity list aggregating the revenue .

The component can be dragged in lightning design experience or in App builder lightning Page .

Video Demonstration-



SalesLeaderBoard from Mohith Kumar Shrivastava on Vimeo.








Frameworks Used -
Lightning Design Systems (SLDS) for CSSLightning Component Framework for client side logicApex aura enabled class for backend logicApproach
The component hierarchy is very important to imagine or mindmap before we dig deeper- SalesLeaderMain
    -SalesLeaderBoard
    …

Invoking Apex Callout From Process Builder

Process builder is GA in Spring 15 and one of the queries I came across was around how to invoke apex callouts from Process builder .

Before process builder came we had two common approaches of calling webservice 

1)We have outbound messages as one of the Actions for workflows.This works if other party implements the WSDL that is generated once Outbound messaging is defined with appropriate end point .

2)Most of times future method invoked through triggers allowed to do apex callouts and invoke external web service provided the future method is annotated with @future(callout=true).This provides lot of flexibility and one of the best approaches .

3)Flow triggers was in BETA and this was also one of the ways we could invoke callouts provided the Flow implements process plugin .To understand in detail how to implement process plugin refer to the below example

The purpose of this blogpost is to demonstrate the new possibility of invoking apex callout through Process Builder 

I tried initi…