Tutorial: Convert Visualforce to Lightning

Overview

High-Level Transition Steps

After you've installed the latest version of FormBuilder Rx and DXP, there are a few steps you need to take to enable Lightning Experience for FormBuilder. Following is a high-level list of the steps:

  1. Enable Admin DXP Configuration for FormBuilder Rx
  2. Create a New Digital Site Build Your Own (BYO) Lightning Template
  3. Set up a new FormBuilder Environment for Bolt BYO Template
  4. Set up FormBuilder for DXP:
    1. New Lightning Templates
    2. A DXP Permission Set for Users
    3. Tweak Form Pages for DXP
  5. Set Up Digital Site BYO (AURA) Workspace Administration
    1. Set up Login and Registration
    2. Set up the Homepage
    3. Activate the Digital Site
  6. Set up a Guest User for Digital BYO (AURA) Site
  7. Digital Site BYO (AURA) Builder Settings
  8. Update FB Env for Registration Url
  9. Update Call Back Button Script (if exists)
  10. Homepage Setup
  11. Publish and Test.

Enable Admin DXP Configuration for FormBuilder Rx

To enable DXP configurations for the FormBuilder Admin Panel, you'll need to update the FormBuilder Rx custom setting using below steps:

  1. Go to Setup and search for “Custom Setting” in the Quick Find box. Go to the FormBuilder Setting and click "Manage."

  2. Click "Edit" for the Admin Settings record and activate Show Dxp Tabs and Show FormBuilder Tabs, if not active. Then, Save the changes.

  3. Go to the Formbuilder Rx Admin Panel and verify that DXP tabs named Login Builder (DXP) and Widget Builder (DXP) are visible as shown below.

Create a New Digital Site BYO Lightning Template

  1. Go to Setup and search for Digital Experiences > All Sites > New

  2. Choose the Enrollment Rx Bolt Solution Template named "FormBuilder Rx for Lightning."

  3. Next, click on the Get Started button.

  4. Enter a Name and URL to create the new digital site.

  5. Wait for Setup to complete.

  6. Once completed, you will see below screen. Two sections, Builder and Administration, will be used in later steps.

Set up a new FormBuilder Environment for the Bolt BYO Template

  1. Go to the FormBuilder Admin Panel, create a new Environment for a new BYO Portal/template/digital site and click Save.

  2. Select a new FormBuilder Environment.

  3. Click on the New Version icon and clone the pages, registration messages and widgets from a working FormBuilder Visualforce portal, as shown below.

  4. If this is successful, you'll see the below notification.

  5. Set the environment to Live mode.

Set up FormBuilder for DXP

You'll need to make some modifications for the Lightning environment in five modules of FormBuilder.

Template Builder Changes (New Template For Lightning)

  1. Go to the FormBuilder Admin panel, click on Template Builder, and click on New Template.
  2. Next, select ERX Template, choose the “Lightning” radio button, select the template and Save.

  3. Edit the newly created template and set as default.

Note:
If there is any custom CSS or JavaScript, please copy the code from the Classic template to the newly created Lightning template.

DXP Permission Set for Users

  1. Go to Login Builder (DXP) and click on the Message button.

  2. Select the Dxp_Full_Access permission set and Save.

Note:
To grant permissions to existing Portal users, use this button: “Apply Permission Set to Existing Users.”

Tweak Form Pages for DXP

  1. URL Change: FormBuilder pages will have new URLs (/page-maker?c__pageid=My Profile) that will need to be updated throughout the entire Lightning portal.

  2. List Component Change: You'll need to update all the pages that contain the list component for the “Create New List Button URL” with a new URL.

Digital Site BYO (AURA) Workspace Administration

Set up Login and Registration

You'll need to change the Login and Registration page setting with new pages.

  1. Go to Workspace Administration and click on the Login and Registration tab
  2. Choose the Experience Builder login page called “Login”
  3. Choose the Experience Builder "Forgot Password," map the page “Forgot Password,” and Save.

Set Up the Homepage

Go to the Pages tab and change the homepage to “Default” and Save

Activate Digital Site

Go to Settings and click Activate button

Setup Guest User for Digital BYO (AURA) Site

Admin need to change the homepage and assign DXP permission set “DXP FULL ACCESS”

Site Homepage

Go to Setup, search for "Site" in the the Quick Find box, select Edit site, and change the homepage to “Communities Landing”

DXP Permission Set

Click on Public Access Setting > View User > Guest User and assign the DXP FULL ACCESS PermissionSet.

Digital Site BYO (AURA) Builder Settings

LOGIN / Pagemaker-Registration/Forgot password page

LOGIN PAGE

The URL link will differ with the existing one. In Builder Experience, click on the Publish button to get the URL. Then set up the login page URL like this:

Open the URL (this is unique from org to org) in "incognito mode" in the browser. The URL should redirect to the Login Page https://dxpwinter22-developer-edition.na213.force.com/ApplicantPortal/s/login/?

Forgot Password

After clicking on the "Forgot Your Password?" link, the page will redirect to the Forgot Password page https://dxpwinter22-developer-edition.na213.force.com/ApplicantPortal/s/login/ForgotPassword?

Page Maker - Registration

After clicking on "New User," the page will redirect to the Page Maker registration page if you map the correct URL on the Environment details page https://dxpwinter22-developer-edition.na213.force.com/ApplicantPortal/s/login/SelfRegister

Go to Experience Builder

Note:
  1. If the registration page on the Page Maker side is the first page, the registration page can be accessed with the below URL https://dxpwinter22-developer-edition.na213.force.com/ApplicantPortal/s/login/SelfRegister
  2. If it's not the first page, you'll need to append a Page Maker ID to the above URL https://dxpwinter22-developer-edition.na213.force.com/ApplicantPortal/s/login/SelfRegister?lc__pageid=Registration

Update the FormBuilder Environment for the Registration URL

You'll need to update the above Registration URL in the FormBuilder Environment Self Registration URL by clicking Edit Environment in the FormBuilder Admin Panel.

Security and Privacy

  1. Go to Settings and click on Security and Privacy
  2. Change the security level to "Relaxed CSP":

CSP TRUSTED SITE

In Experience Builder, if you use any of the below widgets, you'll need to add the external URL in the CSP trusted site on the Salesforce side:

  • Video Link
  • iFrame (any external URL)
  • Social Feed (Facebook)
To add a trusted site, go to Setup and search for “CSP trusted site“. Click on New and enter the external URL.

FormBuilder Button Script for the Call Back Method

This step is needed only when any of the FormBuilder pages are using a button call back script. You'll need to put the callback method script in Experience Builder instead of Template Builder using the below steps.

  1. Go to Experience Builder, click on Settings, click on Advanced, and click the Edit Head Markup button

  2. Copy the script code from Template and paste in Experience Head Markup

Note:
When using third-party URLs, you'll need to add them to your CSP Trusted SItes.

Homepage Transformation

Widget Record Creation in the FormBuilder Admin Panel (Widget Builder DXP)

In Homepage configuration, you'll need to create all records related to the homepage using a Widget (for example, Application Status, Social Feed, Apply Now, Contact Info, iFrame, VIdeo, Greeting, etc.). Follow these steps:

  • Click on the FormBuilder Admin Panel, click on Widget Builder (DXP) and click New

  • A popup will be displayed with different types of widgets in a dropdown

  • Select the widget you want to create
  • Enter Details (Name, Widget Type), other info and click on the Save button
Example : Application Status Widget

An application status widget will get created. You can also edit the widget.

Similarly, you can select and create any widget from the list. These widgets can be edited to change the data that was not possible in the original FormBuilder Widgets.

Homepage setup in Experience Builder (Community Experience Builder)

The Experience Builder has a default template (active in Template Builder) for all six pages (Login/Register/Forgot/Home/Homepage-upload, Page Maker). After the widget creation step, you'll need to set up the widget in Experience Builder. Follow the steps below.

  • Go to Setup, search "All Sites" and click on the Builder button on the Community

  • In Experience Builder, go to the homepage and change the Column Layout setting to the desired type (e.g., one column, two column, etc.)

  • Click on the Components icon and drag and drop the DXP Application Status Widget

Once the components get placed, you'll need to select the Application Status Widget for the environment. You can also provide a height for the widget for proper column/row alignment with other widgets.

Note:
All versions will get displayed in the Widget's name. You should select the desired record.

You'll need to create all widgets using the FormBuilder Admin Panel and configure them in Experience Builder. Once all widgets are created, the last step is to test the site. (Publish the changes first to test the site.)