Visualforce Editor

Visualforce is an important part of any Salesforce development. It allows you to develop highly customized pages and views with a complex UI. The Visualforce editor provides lots of built-in tags and features together with the standard HTML markup in conjunction with inline CSS and Javascript code. Visualforce boasts about 100 built-in components and a mechanism whereby you can create your own components. By composing components, HTML, and optional styling elements you are able to create Visualforce pages, and each page is then accessible by a unique URL


Visualforce Editor


The Visualforce Editor, as well as all other text editors in The Welkin Suite, provides multiple basic and also advanced editing features that may decrease time spent on development.

In addition, the Visualforce Editor itself may use the elements of HTML, CSS and JavaScript code.

Visualforce Code Assistance

In the Visualforce Editor, you can find lots of handy features of Code Assistance that make your development faster and more convenient:

Visualforce Previewer

Once you open any Visualforce page, you can see a split-screen editor. In the lower part of the screen, there is the Visualforce code editor itself. While in the upper part of the editor you can see a preview of your page directly from your org.


Visualforce Previewer


The Welkin Suite uses the Chromium browser engine for the previewer, so you can be sure that you see the same picture as most of your users will see. However, if you need to test a page in a different browser, you can do this using a button in the toolbar, which will open this page in your default browser.

You have also two additional options for previewing, that are available from the toolbar:

  • Custom URL radio button — if you'd like to check your Visualforce page, for example, on the public Force.com site as a guest user, check it and enter a full URL of the page that you'd like to use as a preview,
  • Parameters radio button — if your page accepts or expects any GET parameters, you can easily pass them — just check this button and fill in your parameters to the text field in the top part of the previewer.

The Welkin Suite remembers these settings, and even after reopening the IDE itself, it will fill-in the parameters / URL according to whatever you've used the last time.

Each time you build changes in your Visualforce pages, the IDE refreshes the preview automatically. You can also do it at any time you need — just click on the Refresh button at the toolbar.

You can collapse the Visualforce 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 Visualforce editor, and the IDE will remember this setting for this page.

In this section:

This also may be useful:

Last modified: 2018/02/27 16:08

footer image