Lightning previewer

The Lightning Components and Applications Previewer along with the Lightning Editor in TWS is a convenient way to check all your Lightning changes directly in the IDE. You don't need anymore to switch between different windows and waste your time.

Lightning previewer

Once you open any file from a Lightning bundle, you'll see the Lightning Components and Application Previewer. All the files, included in the bundle, are available via tabs below the previewer window.

The previewer is located in the top part of the combined editor, and all the bundle's members are present lower part in the tabs. This means that you can switch between the tabs, and the Lightning previewer will be available for you always. When you make changes in any file in the bundle and build them to your Salesforce Organization, all the updates will be automatically displayed in the previewer in seconds, just after a change is saved on your Org.

In the case, when you are working with a Component bundle, the IDE provides you with a possibility to specify which Lightning Application should be used for previewing the component. You can select the needed Application itself, and specify the appropriate URL parameters for it in the toolbar of the previewer. Also, you have a possibility to type / paste any URL for previewing your Lightning Component, for example, to preview it using a detail view of any record in the Org.

When you are working with an Application bundle, of course, you don't need to select an application for previewing it. So for this case, The Welkin Suite provides you with the ability to just specify additional URL parameters. This setting is also present in the toolbar of the previewer.

The Welkin Suite uses the built-in browser based on the Chromium engine for previewing. At the same time, you can refresh it manually using the Refresh button in the top left corner of the previewer. In addition, you can open a preview of your Lightning Application in your default browser directly from the IDE — use the appropriate button in the top right corner of the previewer.

This feature is available for you on the projects which are associated with the Org that has a custom domain. You should enable a custom domain for your organization on Salesforce and then use it during the creation of a project.

In case, if you want to enable a custom domain for your existing project, guide the following steps:

  1. open the Properties of a project,
  2. enter the URL of your custom domain into the URL field,
  3. verify the credentials, including the security token,
  4. click Apply and then OK to save changes,
  5. save your solution and restart.

The Lighting Previewer will be automatically opened when you open any application file in the IDE.

In addition, you can easily collapse Lightning Previewer, if you do not need it now. To do so, click on the double arrow between the Previewer and the code editor. To expand the Previewer back, click on this button one more time.

Collapse Lightning Previewer

You can collapse the Lightning previewer by default: to do so, navigate to the Main Menu: Options ⇒ Project UI ⇒ Previewers. In case if you'd need a previewer for a certain page, you can manually expand it in the Lightning editor, and the IDE will remember this setting for this application or component.

In this section:

This also may be useful:

Last modified: 2018/02/05 15:28

footer image