Skip to main content

Explore the Visualforce to LWC Sample App

Using the App

There are a couple of ways you can use this app. Because you cloned the visualforce-to-lwc repository, you could simply open that folder in Visual Studio Code and dig into the source code. But you also just installed a shiny new app in your Trailhead Playground, so let's dive into that!

In this project, we explore five examples of key patterns.

  • View a record with data from a parent record.
  • List records with a link to open each record.
  • List records with data from parent records.
  • Display records in a paginated list with page navigation controls.
  • Click one button to create two records of different types.

We’re not going to delve deeply into the code for each of these patterns. Instead, we're going to tour the app and explain how functionality you’re familiar with in Visualforce is implemented in our Lightning web component examples.

Let’s get started.

Single Records

  1. Click the Single Records tab.
  2. Click Take me there!
  3. Look at the View Record with Parent Record Data card.
    This card shows how to display an account record with parent record data (the account owner), both in Visualforce and in a Lightning web component.
    The View Record with Parent Record Data example displays the account name, phone number, account type, and account owner name in Visualforce and as a Lightning web component.
  4. Click View Visualforce source and review the code.
    In Visualforce, we use apex:form and standard controller fields to show the record details.
  5. Click View LWC source and review the code.
    In the Lightning web component, we combine the lightning-record-view-form base component with the getRecord wire adapter (powered by Lightning Data Service) to retrieve the records and their fields. This way, we get all the caching and synchronization benefits of Lightning Data Service for both the record and its parent.

Record Lists

  1. Click the Record Lists tab.
  2. Look at the List with Record Links card.
    In the list of accounts, the account name is a hyperlink to the account detail page. (In this app, we’ve replaced the standard account details page with examples. If you use this component in another org, the link opens the expected account details page.)
    The List with Record Links example lists accounts in a table with the account name, type, phone, and number of employees. There is a Visualforce implementation and a Lightning web component.
  3. Click View LWC source.
    In the example, we populate a lightning-datatable by calling a cacheable Apex method with @wire. The interesting part of this example is that we use a custom cell renderer in lightning-datatable to show the record links.
  4. Shift your attention to the List with Parent Record Data card.
    This example retrieves a list of accounts, including parent record data (the account owner’s name).
    The List with Parent Record Data example lists accounts in a table with four columns: Account Name, Type, Phone, and Owner Name. There is a Visualforce implementation and a Lightning web component.
  5. Click View LWC source.
    As we did in the List with Record Links example, we feed the table by calling a cacheable Apex method with @wire. However, because lightning-datatable is independent of the data source, we must transform the data to match the format that the lightning-datatable component expects. In this example, we give you a method that performs a recursive transformation to any level in the queried related records.
  6. Now look at the Paginated List card.
    This example displays records in a paginated list. Although infinite scrolling is the preferred user experience, you may still want to use pagination in some cases. That’s why we included this example.
    The Paginated List example displays one page of the account list with pagination controls at the bottom. There is a Visualforce implementation and a Lightning web component.
  7. Click View LWC source.
    Like the previous examples we explored, this example calls Apex with @wire. In this case, however, the adapter retrieves only the first five records for the first page. It doesn’t retrieve records 6–10 for page 2 until you go to page 2.

Mixed Records

  1. Click the Mixed Records tab.
  2. Review the Create Mixed Records via LDS Functions card.
    This example uses JavaScript to create two records of different types: a contact and an opportunity.
    The Create Mixed Records via LDS Functions example has three inputs (first name, last name, and opportunity name) and a Create Contact and Opportunity button. There is a Visualforce implementation and a Lightning web component.
  3. For the new contact, keep the default values: Yan Khang.
  4. For the opportunity, keep the default value: Possible deal.
  5. Click the Create Contact and Opportunity button.
    Two success messages should be displayed.
  6. Click View LWC Source.
    To create the records, we performed two independent calls to the createRecord LDS function. Note that each method call runs on its own transaction and the created records are unrelated.

Next Steps

In this project, you learned how to install and use the Visualforce to LWC sample app. We recommend that you continue examining the code for the app’s examples. 

Additionally, we strongly recommend that you look at the Lightning Web Components for Visualforce Developers Trailhead module, which describes the Lightning Web Components concepts from a Visualforce developer’s perspective. It also provides some context for the examples in the Visualforce to LWC sample app.

Share your Trailhead feedback over on Salesforce Help.

We'd love to hear about your experience with Trailhead - you can now access the new feedback form anytime from the Salesforce Help site.

Learn More Continue to Share Feedback