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.

You can customize the Visualforce Editor as you want. To do so, go to the Options Menu: Main Menu ⇒ Tools ⇒ Options… ⇒ Text Editor ⇒ Visualforce.


Customize your VisualForce Editor


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:

  • Automated formatting — it allows for making your code more readable in one click. Please note that code format for Visualforce currently changes all tags to a lower case,
  • Code Outlining — it divides your code into separate code blocks between opening and closing tags, and it gives you the ability to selectively hide the parts of a code that you don't need right now,
  • Closing tag completion — the editor automatically creates a closing tag once you write an opening tag. Please note that when you change the opening tag, the closing tag is also automatically changed to match it,
  • Code Completion for HTML tags, CSS declarations and inline CSS — intelligent code completion and hints are displayed automatically for HTML tags, their attributes, inline (inside a style attribute) CSS and standalone CSS code,
  • Markup Completion — handy feature for work with Visualforce tags,
  • Javascript syntax highlighting — a handy feature that highlightes the different elements of Javascript code to make it more readable,
  • Comment / Uncomment — a simple tool for leaving comments for the selected part of a code.

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're also able to collapse Visualforce previewer by default. To do so, navigate to the Main Menu: Tools ⇒ Options ⇒ Projects ⇒ Presentation and check the box next to the Collapse Visualforce Previewer option.


Collapse Visualforce Previewer


Opening Visualforce pages in the browser

The Welkin Suite gives you a possibility to open Visualforce pages in a browser. Preview what the pages will look like, and make changes instantly.


Opening VisualForce pages in the browser


You can launch the preview mode via the option Open in browser, which can be found in the context menu of the Visualforce page in the Solution Explorer.

For previewing Visualforce pages, The Welkin Suite uses the default browser.

In this section:

This also may be useful:

Last modified: 2018/02/16 12:54

footer image