Create a Lightning App Without Coding

Lightning app builder is a point and click tool to create a single page application for Salesforce1 and Lightning Experience. Simply drag and drop the components into the builder layout to build the application

Lightning app builder is a point and click tool to create a single page application for Salesforce1 and Lightning Experience.  Simply drag and drop the components into the builder layout to build the application.  We can build single page applications using Visualforce pages and global actions to make app more interactive.  App builder also provides the capability to build dashboard style applications.

Basic component: 

It builds responsive application that automatically work on multiple devices.  The template defines the layout behavior by rearranging the regions.

Example layout: 

lightning app without coding

This is a 3-section layout.  1 section is Main column and sections 2 and 3 are side bars.  The sections are getting rearranged automatically based on the device that is used to view the page.

There are 3 types of pages can be created using Lightning App Builder. They are,

➔ App Page.

➔ Home Page.

➔ Record Page.

App Page: 

Building a one-page app for lightning and Salesforce1 app.

  1. Navigate to Setup Home ➔ User Interface ➔ Lightning App Builder.
  2. Click New and then choose App Page to create one-page app, then click next.
lightning app without coding
  1. Choose layout from the available 4 options.  These are the layout arrangements that can be visible in different devices.
lightning app without coding
  1. Name the app in the text box with the name Label and click finish.
lightning app without coding

There are 3 components that can be dragged and dropped into the layout.  They are standard component which are prebuilt components. Custom component will display the managed and unmanaged package components.

lightning app without coding

Visualforce page in the Standard component has the accessibility to Visualforce pages that are enabled for ‘Available for Salesforce mobile apps and Lightning Pages’.

Image

The application can be previewed in various devices by switching the device name as shown below,

lightning app without coding

Once designed the app, click save and click Activation to activate the application.

  1. Page settings Tab: Modify the app name if necessary and change the icon of the app.  Page activation option is to change the app visibility to either for all users or administrator only.
lightning app without coding
  1. To add the new app in the lightning menu, click Lightning experience tab and then click add page to menu.
lightning app without coding

Switch the location of the app if necessary.

  1. To add the created app in the Salesforce1 app menu, click salesforce1 tab and then click Add page to menu.
lightning app without coding
  1. Move the app in any order and click save.

Lightning App is successfully created and added to menu and the screenshot for the same is as follows.

Lightning Menu:

lightning app without coding

Salesforce1 Menu:

lightning app without coding

Home Page: 

Home page customization is for lightning experience home page customization.

  1. Navigate to Setup Home ➔ User Interface ➔ Lightning App Builder.
lightning app without coding
  1. Choose Home Page and click next.
  2. Unlike App Page, Home Page has a single layout with 4 sections. Choose it and name the page.
lightning app without coding
  1. Like App Page, Home page has 3 components that can be dragged and dropped into the layouts.  Design it and click Activation.
  2. Select the visibility of the home page.  Whether it needs to be default home page for all or it needs to visible for a specific profile.
lightning app without coding
  1. Choose the profiles in the next step.
lightning app without coding
  1. Preview the scope of the page and click activate. And the home page will be as shown below,
lightning app without coding

Record Page: 

To design the record page of lightning experience.

  1. Navigate to Setup Home ➔ User Interface ➔ Lightning App Builder.
  2. Choose Record page and click next.
lightning app without coding
  1. Record page offers 3 Layouts and is shown below. Choose one and click next.
lightning app without coding
  1. Standard components offer effective way of displaying records such as Tab, and highlight component. Tab component is dropped in the layout and added 4 tabs and it is shown below.
lightning app without coding
  1. After designing and previewing, click save and Activation.
lightning app without coding

If there is a record page already created for the object, then the old page is replaced with the new page.

Record page is successfully created and the record page is shown below.

lightning app without coding

Reference Links: https://developer.salesforce.com/page/Lightning_App_Builder

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Events in LWC

Introduction to Events  An event that fired by another lightning component or the component itself. Events is nothing but the way component is going to

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.