• This repository has been archived on 10/Jan/2024
  • Stars
    star
    106
  • Rank 325,871 (Top 7 %)
  • Language
    JavaScript
  • License
    BSD 3-Clause "New...
  • Created about 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Sample Components for Lightning Component Actions

This repository contains sample components to help you build Lightning component actions, which can be used to replace JavaScript buttons used in Salesforce Classic. These components cover the following use cases that are common in JavaScript buttons:

  1. Dialogues
  2. Conditional URL
  3. Mass Updates

Getting Started

Using Salesforce DX:

  • Mac or Linux

git clone https://github.com/developerforce/LEXComponentsBundle
cd LEXComponentsBundle
./install.sh
  • Windows

git clone https://github.com/developerforce/LEXComponentsBundle
cd LEXComponentsBundle
install.cmd

Not using Salesforce DX: Install this unmanaged package to your Developer Edition or Sandbox org.

Click here to install

How to Choose a Component

  1. Look at your org to determine which JavaScript buttons are still in use and need to be converted.
  2. Pick a button that youโ€™d like to replace.
  3. From the component list, pick one that closely matches what your JavaScript button is doing.
  4. Edit the component sample code to match your needs. Tip: Make a copy of the component's files and modify those instead.
  5. Test and deploy per the "Create and Test Your Lightning Component Action" section below.

Classes & Components

Components are listed by name. Details include the use case it applies to, the object it acts upon, its description, and the set of files that make up the component.

ย 

Components that use Lightning Data Service begin with โ€œldsโ€. Components that donโ€™t use Lightning Data Service have Apex classes associated with them.
  1. accountQuickContact
    • Use case: Dialogues
    • Object: Account
    • Description: Opens a form to create a contact related to the account. This is similar to ldsAccountQuickContact, but in this case the data is sent to an Apex class instead.
    • Files:
      • accountQuickContact.cmp
      • accountQuickContactController.js
      • accountQuickContact.css
      • AccountQuickContactController.cls
      • TestAccountQuickContactController.cls
  2. ldsAccountQuickContact
    • Use case: Dialogues
    • Object: Account
    • Description: An example of how Lightning Data Service works for creating a new record. Opens a form to create a contact related to the account. The data is sent to the server through the JavaScript controller, so no Apex class is needed.
    • Files:
      • ldsAccountQuickContact.cmp
      • ldsAccountQuickContactController.js
      • ldsAccountQuickContactLDS.css
  3. ldsDisplayRecord
    • Use case: Dialogues
    • Object: Account
    • Description: An example of how Lightning Data Service works for displaying a record. A popup window opens showing data about the current record. In this case, neither a JavaScript controller nor an Apex controller are needed.
    • Files:
      • ldsDisplayRecord.cmp
      • ldsDisplayRecordController.js
      • ldsDisplayRecord.css
  4. ldsDeleteRecord
    • Use case: Dialogues
    • Object: Any
    • Description: An example of how Lightning Data Service works for deleting a record. When the user executes the component, the JavaScript controller calls the server to delete the record, so no Apex class is needed.
    • Files:
      • ldsDeleteRecord.cmp
      • ldsDeleteRecordController.js
      • ldsDeleteRecord.css
  5. ldsSaveRecord
    • Use case: Dialogues
    • Object: Account
    • Description: An example of how Lightning Data Service works for updating a record. A popup window opens with information about the record and an editing form. Upon saving, the record is updated. The JavaScript controller sends the updated data to the server, so no Apex class is needed.
    • Files:
      • ldsSaveRecord.cmp
      • ldsSaveRecordController.js
      • ldsSaveRecord.css
  6. massUpdateAccountCases
    • Use case: Mass updates
    • Object: Account
    • Description: Updates all the cases related to the account. It changes the case priority to โ€œLowโ€, the status to โ€œClosedโ€ and the description to โ€œCase Closed.โ€
    • Files:
      • massUpdateAccountCases.cmp
      • massUpdateAccountCases.css
      • MassUpdateAccountCasesController.js
      • MassUpdateAccountCasesController.cls
      • TestMassUpdateAccountCasesController.cls
  7. probonoOpportunity
    • Use case: Dialogues
    • Object: Opportunity
    • Description: When executing this component in an opportunity, a popup window opens, asking for confirmation to convert the record to a pro-bono opportunity. If the user clicks โ€œConfirmโ€, the opportunity amount updates to $0 and the page refreshes.
    • Files:
      • probonoOpportunity.cmp
      • probonoOpportunityController.js
      • probonoOpportunity.css
      • ProBonoOpportunityController.cls
      • TestProBonoOpportunityController.cls
  8. redirectConditionalUrl
    • Use case: Conditional URL
    • Object: Account
    • Description: Opens a popup window with two options: One opens the billing address in Google Maps, and the other opens the shipping address. This uses the record ID, sends it to the server, and retrieves the address data.
    • Files:
      • redirectConditionalUrl.cmp
      • redirectConditionalUrlController.js
      • recirectConditionalUrlHelper.js
      • redirectConditionalUrl.css
      • RedirectConditionalUrlController.cls
      • TestRedirectConditionalUrlController.cls
  9. setOpportunityProbability
    • Use case: Dialogues
    • Object: Opportunity
    • Description: Opens a popup window with three buttons. One button sets the probability of the opportunity to a High value (%80), another sets it to a medium value (%50), and the last to a low value (%20). The Javascript controller sends the record ID and the option selected to the Apex class.
    • Files:
      • setOpportunityProbability.cmp
      • setOpportunityProbabilityController.js
      • setOpportunityProbabilityHelper.js setOpportunityProbability.css
      • setOpportunityProbabilityController.cls
      • TestSetOpportunityProbabilityController.cls

Create and Test Your Lightning Component Action

  1. Make sure the Lightning components are installed in your org.
  2. In Setup, go to the Object Manager.
  3. Select the object that you want to add the action to.
  4. Click Buttons, Links & Actions, then click New Action.
  5. From the Action Type drop down list, select Lightning Component.
  6. Select the component you want to be called by the action.
  7. Enter a label for the action, then click Save.
  8. Add the action to the objectโ€™s page layout.
    a. Click Page Layouts.
    b. Select the layout you want to add the action to.
    c. If you havenโ€™t already, click override the predefined actions in the Salesforce Mobile and Lightning Experience section of the layout.
    d. In the palette, click the Mobile & Lightning Actions category, and then drag the action that you created to the Salesforce Mobile and Lightning Experience section.
    e. Click Save.
  9. Navigate to a record and give the quick action a try. Youโ€™ll likely find it in the page-level actions menu in the record highlights panel.

Let us know how you feel about the components. Post your feedback and questions to the Lightning Now! group in the Trailblazer Community with the hashtag #JS_Alternatives.

More Repositories

1

Force.com-JavaScript-REST-Toolkit

ForceTK - a minimal Force.com REST API for JavaScript apps
JavaScript
315
star
2

Force.com-Toolkit-for-PHP

HTML
262
star
3

pub-sub-api

Sample project to get started with the Pub/Sub API
Java
105
star
4

Mobile-Design-Templates

Repo for hosting the Mobile Design Templates
JavaScript
97
star
5

open-cti-demo-adapter

JavaScript
91
star
6

LightningContainerExamples

JavaScript
67
star
7

Force.com-Toolkit-for-Ruby

Ruby
59
star
8

DataWeaveInApex

Examples for working with DataWeave scripts from Apex.
Apex
59
star
9

Force.com-Toolkit-for-Facebook

A collection of Apex classes and Visualforce pages for working with the Facebook social graph
Apex
50
star
10

SalesforceDurableStreamingDemo

Salesforce Durable Streaming Demo
Apex
41
star
11

salesforce-slack-starter-kit

Salesforce Slack Starter Kit - a minimal opinionated scaffold for building Slack Apps Integrated to Salesforce
JavaScript
39
star
12

pubsub

The c/pubsub cross DOM messaging component
JavaScript
33
star
13

LightningNowWorkshop

Workshop Content for Sales Admin Lightning Now Tour Workshop
HTML
30
star
14

troubleshoot-lwc

Base Lightning Web Components Trailhead Troubleshooting Lightning Web Components
CSS
29
star
15

elf_elk_docker

Docker image for running Salesforce Event Log File on ELK stack
Shell
25
star
16

df15-devzone-presentations

Presentations from Dreamforce 2015
24
star
17

Jetstream

streaming proxy for salesforce streaming api
Java
17
star
18

lightning-inspector-doc

Documentation for the Lightning Component Inspector, a Chrome DevTools Extension
16
star
19

MobilePack-jQueryMobile

Contains everything related to jQueryMobile MobilePack
15
star
20

pdf-generator

This project helps you generate a PDF from a Custom Compensation Object in Salesforce using Slack, Salesforce and Salesforce Functions.
JavaScript
15
star
21

lightning-out

Docs and samples for Lightning Out
JavaScript
14
star
22

reactive-salesforce-rest-angular-crud

Java
14
star
23

Force.com-Toolkit-For-Windows-Azure

C#
14
star
24

Visualforce-Charting-Examples

A few examples of all of the Visualforce Charting types as of Winter '13
Apex
14
star
25

visual-studio-tools

Microsoft Visual Studio tooling for salesforce.com
C#
13
star
26

StreamingReplayClientExtensions

Java
13
star
27

GIFter

Sample app for the Trailhead project "Quick Start: Unlocked Packages"
JavaScript
13
star
28

ExchangeRates

Apex
12
star
29

lightning-components-tutorial

Lightning Component Tutorial
HTML
11
star
30

Common-Libraries-for-NET

The Common Libraries for .NET provides functionality used by the Force.com Toolkit for .NET and the Chatter Toolkit for .NET.
C#
11
star
31

TH_CloudPages_PrefCenter

Sample HTML files for a custom preference center in Marketing Cloud.
HTML
10
star
32

MetadataDrivenTriggerHandler

Apex
10
star
33

spring-mvc-fulfillment-base

Java
9
star
34

Site.com-Quick-Start

Site.com export file to support the Site.com Quick Start
9
star
35

Force.com-Toolkit-for-Jasper

The Force.com Toolkit for Jasper is an Apex client library for the Jasper Control Center API
Apex
9
star
36

emote-server

Backend for https://github.com/fostive/emote-widget
JavaScript
9
star
37

salesforce-dx-pipeline-sample

Sample app for the hands-on bootcamp "Developing Applications with Salesforce DX and Heroku Pipelines"
Shell
9
star
38

Chatter-Toolkit-for-NET

The Chatter Toolkit for .NET provides an easy way for .NET developers to interact with the Chatter REST API using a native libraries.
C#
9
star
39

account-merge

Update accounts in a target org with data from a source org. The application uses Salesforce Functions and the pg_trgm module in Postgres to find duplicated records.
Apex
9
star
40

lightning-connect-tutorial

8
star
41

emote-widget

A widget allowing attendees to share emotion with others in real-time during a virtual event. Build with Lightning Web Components https://lwc.dev
SCSS
8
star
42

vfanalyzer

A node.js application to query Visualforce markup and related JS files for potential LEX conflicts
CSS
8
star
43

lwc-rfc-template

RFC template to design and plan LWCs
7
star
44

salesforce-slack-starter-kit-s2s

JavaScript
7
star
45

github-custom-adapter

Apex
6
star
46

PermSetUnlockedPackage

Sample repo designed for Trailhead module "Package Permission Sets Using Salesforce DX"
6
star
47

reactive-salesforce-rest-javascript-seed

Java
5
star
48

lightning-process-builder-tutorial

5
star
49

SalesforceDurablePushTopicDemo

This repository contains all the code you need to set up a Durable PushTopic Streaming client inside of a Visualforce page in your Salesforce org.
Apex
5
star
50

partner-intelligence-basics

Apex
5
star
51

MobilePack-KnockoutJS

Contains everything related to KnockoutJS MobilePack release
C
4
star
52

salesforce-canvas-seed

HTML
4
star
53

ltngx-http

A sample HTTP proxy component and JS API.
JavaScript
4
star
54

gif-booth

Add animated GIFs and Family Photo to your virtual events
JavaScript
3
star
55

Mini-hacks

Apex
3
star
56

ForcedotShell

Simple iOS WebShell app which allows you to set salesforce details via the settings app. This is really intended for demo launching rather than full-blown apps which should use OAuth for login.
Objective-C
3
star
57

SecureDevWebinar-sample

2
star
58

developerforce-Chatter-QuickPost-Firefox-Plugin

JavaScript
2
star
59

heroku-connect-status

Scala
2
star
60

use-apex-to-automate-business-processes

Trailhead Badge: Use Apex to Automate Business Processes
1
star
61

SalesforceDurableGenericDemo

Apex
1
star
62

tdx23-lwc-hack

LWC Hack for TDX23
HTML
1
star
63

soql-fields

1
star
64

demo-df13-devkeynote-s1app

Code from the DF13 Developer Keynote Salesforce1 Demo
Shell
1
star