80 terms

Salesforce Lightning Components Basics


Terms in this set (...)

What must be enabled in order to develop Lightning Components?
My Domain
What are the benefits of using My Domain?
1.) Access Salesforce from a custom URL (i.e. https://[mydomain].my.salesforce.com) that is reserved exclusively for you.
2.) Highlight your business identity with a custom URL.
3.) Brand your login screen and customize "right-frame" content (which is normally ads for Salesforce).
4.) Block or redirect page requests that do not use your custom domain URL (i.e. added security).
5.) Work in multiple Salesforce orgs at the same time (because of the different URL).
6.) Set custom login policy to determine how users authenticate.
7.) Let users login using a social account, like Facebook or Twitter, and even Google, from the login page.
8.) Allow users to login once to access external services.
Why is My Domain required for Lightning Component development and usage?
For added security.
What is the Lightning Components Framework?
Lightning Components is a UI Framework for developing web apps for mobile and desktop devices. It is a modern framework for building single-page applications with dynamic, responsive user interfaces for Salesforce apps. It uses JavaScript on the client side and Apex on the server side.
What is a "Framework"?
A Framework is a collection of code and services that make it easier for you to create your own custom apps, without having to write all the code yourself.
Name some examples of popular Frameworks today.
1.) AngularJS
2.) Ruby on Rails
3.) Visualforce!
4.) Lightning Components!!!
What are "single-page apps"?
Single-page apps are modern web apps that are built as a tightly bound collection of code that loads from a single URL, and then runs continuously as you use it.
Lightning Components is this type of markup.
XML markup, which mixes standard HTML tags with custom Lightning Component tags such as <aura:component>.
What is the format of a Lightning Component tag?
<namespace:tagName> (similar to Visualforce, except you will see multiple namespaces).
What are some namespaces used for Lightning Component tags?
1.) aura:
2.) force:
3.) ui:
In Lightning Components, a component is a ...
bundle of code.
Visualforce or Lightning Components: built for mobile first, with mobile in mind, and with mobile at the core.
Lightning Components.
Visualforce or Lightning Components: built to provide a consistent experience between mobile and desktop applications.
Lightning Components.
Visualforce or Lightning Components: its built-in components are not mobile-savvy.
Visualforce or Lightning Components: use as a "container page" to leverage your favorite JavaScript application frameworks.
Visualforce or Lightning Components: has some specific opinions about how data access is performed, has some rather specific security requirements, and is cumbersome when used with JavaScript application frameworks. The features provided between it and famous JavaScript application frameworks are conceptually similar enough that you're effectively running duplicate code when used together. That's neither efficient nor easy to work with.
Lightning Components.
Where can you use Lightning Components?
1.) The main Navigation Menu in both Lightning Experience and Salesforce1
2.) Lightning Experience App Launcher
3.) Lightning App Builder (drag-and-drop reusable components)
4.) Lightning Pages
5.) Lightning Experience Record Pages
6.) Standalone apps. A standalone app comprises components that use your Salesforce data and can be used independent of the Salesforce1 app.
7.) Visualforce pages.
8.) On other platforms using Lightning Out.
What is a Lightning Page?
A Lightning Page is a custom layout that lets you design pages for use in the Salesforce1 mobile app or in Lightning Experience.
What is the parent tag for a Lightning Component?
What is the parent tag for a Lightning Application?
What tag is used to define a component attribute?
What are the two required attributes for a component attribute?
name and type
What is an expression?
An expression is basically a formula, or a calculation, which you place within expression delimiters ("{!" and "}"). An expression is any set of literal values, variables, sub-expressions, or operators that can be resolved to a single value.
When displaying static text within your component, what is a benefit of using a Custom Label instead of hard-coded text?
1.) Easier to update/maintain without needing to update code.
2.) Salesforce translates Custom Labels as needed.
What cannot be used in expressions for Lightning Components markup?
Within an expression, what is the syntax for referencing a Custom Label?
What is a best practice for outputting text in your Lightning Component?
Use <ui:outputText> or other output components, instead of simply outputting the text in a "bare naked" fashion. Allow the component to do the outputting for you!
What are the advantages of using <ui:outputText> over displaying text in a "bare naked" fashion?
1.) The text is automatically escaped for you.
2.) The text is automatically wrapped in a <span> tag, and you can attach CSS to that <span> tag by setting the class attribute.
What is used to reference a component attribute?
A value provider. For example, "v" is the value provider for the view (i.e. a component itself). Think of them as automatic variables that are made available for you to use.
What is a value provider?
Value providers are a way to group, encapsulate, and access related data.
What is the value provider for the view (i.e. the component itself)?
What is the value provider for the client-side component controller?
Values in a value provider are accessed as...
Named properties, using dot notation.
What data types can be used for component attributes?
1.) Primitive data types
2.) sObjects (standard and custom)
3.) Collections (Maps, Lists, and Sets)
4.) Custom Apex Classes (i.e. user-defined types)
5.) Framework-specific types, such as Aura.Component or Aura.Component[]
What tag can you use in Lightning Components to iterate over a collection?
<aura:iteration items="[MY COLLECTION]" var="[MY ITERATION VARIABLE]">
What tag can you use in Lightning Components to simulate conditional operations/statements/etc.?
<aura:if> and <aura:set attribute="else">
What is the format of a client-side component controller?
Client-side component controllers are JavaScript objects that contain a map of name-value pairs, where the name is the name of the action handler, and the value is an anonymous function definition.
What three parameters should your action handler's anonymous function always take?
1.) component - the actual component
2.) event - the event that caused the action handler to be called
3.) helper - the component's helper, which is another JavaScript resource of reusable functions
What function can be used to write text to the log for JavaScript code?
What function can be used with console.log() to write objects to the console?
What tag can be used to include a resource in a Lightning Component or Application?
<ltng:require styles="" scripts="" afterScriptsLoaded="" />
From the controller, what component method can be used to find a child component within the component?
What do you pass into the cmp.find() method when searching for a component in your controller?
The aura:id attribute from the desired component.
What utility object can be referenced in your controller to perform validations and other actions using its nifty functions?
What attribute of the <ui:inputText> can be leveraged to help with form validations?
What is the format of the value for the errors attribute on the <ui:inputText> tag?
An array of objects containing name-value pairs. For example:

[{message: "This is my error message!"}]
What belongs in a component's helper?
Code that is to be shared between different action handlers.
What is nice to put in a component's helper?
Complex processing details, so that the code within your action handlers remains clean, clear, and streamlined.
It is a best practice to always provide this as the first parameter of your helper functions.
The component.
What is a common pattern in controller/helper code?
What is the point of the "component.set()" line in the "get-process-set" pattern if we are working with the same reference? (i.e. shouldn't the processing be enough?)
It triggers notification that the attribute has changed, causing a cascading effect that re-renders any other references to the same attribute with the new contents. If this were plain JavaScript, this would not be necessary. But with the Lightning Components framework, this happens automatically, like magic, as part of the auto-wiring between components/resources!
When defining an Apex Controller for your Lightning Components, how must methods be declared?
1.) Annotated with @AuraEnabled
2.) public or global
3.) static
How do you wire your Lightning Component to a server side Apex Controller?
<aura:component controller="MyControllerClass" >
To trigger behavior when a component is first loaded, you must write this.
An init handler.
What is an init handler?
An init handler is an action handler that's wired to a component's init event, which happens when the component is first created.
How do you define an init handler in your component?
After the attributes, write the following code:

<aura:handler name="init" action="{!c.clientSideControllerInitMethod}" value="{!this}"/>
What are the steps for communicating with a server method from your client-side controller?
1.) Define the action

2.) Define your callback method

3.) Enqueue the action (i.e. send the request to the server)
How do you define an action?
var action = component.get("c.methodName");
How do you define your callback method?
action.setCallback(this, function(response) { .. });
How do you send the action request to the server?
All requests made to the server controller are these.
Asynchronous actions.
Is there any guarantee as to when the result will be handled, or returned?
Within your callback function, what must you do/check before taking action on the response?
1.) Check that the component is still valid (i.e. that the user did not navigate away to another page, etc.).

2.) Check the state of the response to make sure that the action completed successfully.

if(component.isValid() && response.getState() === "SUCCESS")
What are two "gotchas" to watch out for with respect to connecting your client-side controllers with server-side Apex classes?
1.) JavaScript is case-sensitive, while Apex is case-insensitive. A best practice is to use the exact API Names of every object, field, type, etc., even when it is not needed, in order to avoid issues related to the aforementioned.

2.) The concept of "required" form items (i.e. using the "slds-is-required" class in the form design, as well as setting the required attribute of a <ui:inputSomething> component to true) is only for appearance. They do not perform any validation on the form fields or data. This must be handled within your controller (a combination of client-side and server-side).
With respect to data validation and integrity, what is the best practice? Where should you truly validate your data and enforce data integrity?
On the server-side, within the Apex controller.
When required means "required", enforce it at...
the lowest level possible.
When throwing an error from your server-side Apex controller, how should you do it?
throw new AuraHandledException('My error message.');
What is a benefit of throwing an AuraHandledException instead of returning a System Exception?
1.) You have the opportunity to handle the error gracefully on the client-side.

2.) System exceptions have important details stripped out for security purposes.
What are the two principal ways to interact with, or affect, a component?
1.) Attributes (i.e. set them in the component tag)
2.) Events
What are the API "sockets" of a component that allow you to connect components together to create a "completed circuit"?
Attributes and Events.
How do you define a custom event?
Developer Console > New > Lightning Event
What are the two types of events?
What tag is used to define an event?
<aura:event type="COMPONENT"/>
Use a COMPONENT event when...
You want an ancestor component to catch and handle the event.
What is an ancestor component?
A component that is above the current component in the hierarchy.
Use an APPLICATION event when...
You want to send a "general broadcast", where any component could catch and handle it.
An event's attributes describe...
the payload that it can carry.
Where/how in an event are the implementation and behavior details defined?
Trick question. We do not define these for events. They are just packages. In fact, some events do not have any payloads (i.e. attributes) at all. Some are just messages that share that something happened! All of the behavior about what to do if "this" happens is defined in the components that send or receive the events.
Define the steps involved with sending events.
1.) Define the custom event type by creating a Lightning Event. Give the event type a Name and Attributes. This is essentially the "package" type/definition to be sent.

2.) Register the event with the component that will send the event. This is done using the <aura:registerEvent /> tag and giving it a Name and Type (the Type is the custom event type that you created in step # 1)

3.) Write an action handler in your controller code to fire the event. Use code similar to the below.

var event = component.getEvent("eventName");
Define the steps involved with handling events.
1.) Define the custom event type (likely already done when working on the "sending event" piece).

2.) Register the event with the component that will be handling the event. This is done using the <aura:handler /> tag (similar to when we handled the "init" event).

3.) Actually handle the event!