With Salesforce investing lot on lightning components and I am sure lot of devs in salesforce world have started working with lightning components .
I have also started working on lightning components and below is some cool list on where all currently salesforce allows these components and a small snippet for each showing the interface that lightning component must implement .
Exciting ...Exciting ...Lets start...
The appHostable interface makes the component available as a custom tab.
All that one has to do is to create a lightning custom tab from salesforce Tabs and add to SF1 Navigation's .
I have also started working on lightning components and below is some cool list on where all currently salesforce allows these components and a small snippet for each showing the interface that lightning component must implement .
Exciting ...Exciting ...Lets start...
- Add Lightning Components to Salesforce1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component implements="force:appHostable"> |
All that one has to do is to create a lightning custom tab from salesforce Tabs and add to SF1 Navigation's .
- Add Lightning Components to Lightning Experience
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component implements="force:appHostable"> |
The interface implemented remains as appHostable .The key here is how we can add this tab to new App launcher
- Configure Components for Communities
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:component implements="forceCommunity:availableForAllPageTypes">
</aura:component>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component implements="forceCommunity:availableForAllPageTypes"> | |
| </aura:component> |
- Configure Components for Lightning App Builder
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:component implements="flexipage:availableForAllPageTypes">
</aura:component>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component implements="flexipage:availableForAllPageTypes"> | |
| </aura:component> |
- Configure Components for Lightning Experience Record Home Pages (PILOT)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName"> | |
| </aura:component> |
A good example can be one demonstrated by BalaKishan.Please read his articles on lightning .Some great insights into it .
The key here is you have an attribute recordId and sObjectName populated automatically with correctId and API name
<aura:attribute name="sObjectName" type="String"></aura:attribute> <!-- Atrribute Defination for Record Id --> <aura:attribute name="recordId" type="String"></aura:attribute>
- Add Lightning Components to Visualforce Pages
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="c:SimpleTestCmp" />
</aura:application>
This is coolest feature that's been added lately .To add a lightning component to the VF you first define an aura:application that has aura:dependency and extends ltng:out .
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:application access="GLOBAL" extends="ltng:outApp"> | |
| <aura:dependency resource="c:SimpleTestCmp" /> | |
| </aura:application> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component > | |
| <aura:attribute name="richtextData" type="String"></aura:attribute> | |
| <ui:inputRichText value="{!v.richtextData}" aura:id="inputRT" label="Rich Text Demo"/> | |
| </aura:component> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <apex:page standardStylesheets="false" showHeader="false" sidebar="false"> | |
| <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <head> | |
| <apex:stylesheet value="{!URLFOR($Resource.SLDS0102, 'assets/styles/salesforce-lightning-design-system-vf.css')}" /> | |
| <apex:includeLightning /> | |
| </head> | |
| <body> | |
| <div class="slds"> | |
| <div class="slds-grid slds-wrap"> | |
| <!--Action Buttons --> | |
| <div class="slds-col slds-size--1-of-1"> | |
| <a href="#" class="slds-button slds-button--neutral slds-float--right" id="callbtn" onclick="sendEmail();">Send Email</a> | |
| </div> | |
| <div class="slds-col slds-size--1-of-1 slds-m-vertical--small"> | |
| <h2 class="slds-text-heading--medium">Send Email</h2> | |
| </div> | |
| <div class="slds-col slds-size--1-of-1" id="messagewrapper"> | |
| </div> | |
| <div class="slds-col slds-size--1-of-1"> | |
| <div class="slds-form-element" id="richTextEditor"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| var richtext; | |
| $Lightning.use("c:RichtextApp", function() { | |
| $Lightning.createComponent("c:Richtextcmp", {}, | |
| "richTextEditor", | |
| function(cmp) { | |
| // do some stuff | |
| richtext = cmp; | |
| }); | |
| }); | |
| function sendEmail() { | |
| console.log(richtext.find("inputRT").get("v.value")); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| </apex:page> |
I hope you enjoyed this little article :)
No comments:
Post a Comment