Overview of the Javascript Editor

Overview of the code editor for Data Events and Calculation fields.

Mike Meesseman avatar
Written by Mike Meesseman
Updated over a week ago

Accessing the editor

There are two separate code editors within Fulcrum. One is used for data events and the other is used for calculation fields within your app. 

Data events

As you are building your app, you will see a “Data Events” button in the settings section of the app designer page. This is where you will define your data events within the app.

Calculation fields

When you click on the calculation field to reveal the field's options you will see a expression box. Clicking this will open the editor for that calculation field.

Interface

With the editor window open, let’s take a quick tour of the interface. 

  1. Form fields - Will reveal a window showing all of your fields within your app.

  2. Function list - Will reveal a window showing all of the built-in custom functions. Clicking the function will add the function to the workspace, clicking the description text for a function will take you to the reference page for that function. 

  3. Editor settings - Will reveal a window that allows you to set the settings. You can set the Theme (light/dark), Font Size (12px - 18px) , Code Options (default/strict), and Text Wrapping (On/Off)).

  4. Workspace - This is the area where you will write your data event code

  5. Save and Cancel buttons - Click these buttons to either save your code or cancel out of saving your code.

  6. Navigator - This will show you all your data event code, additionally any errors will highlight in the scroll bar to the right of the navigator.

Right-Click Options

Right-clicking within the editor will reveal some additional options that can be helpful when writing your code. 

Note: examples below are within a data event

Go To Definition

Will go directly to the defined function within the code. This can be helpful when you want to go directly to a definition of a function within your code.

Peek Definition 

Will open window showing defined function, while keeping your current position in the editor. This can be helpful when working with a large amount of code and you are wanting to look at the definition of a function that is being called elsewhere in the code.

Peek References 

Will open a window showing all the references throughout the code. This will allow you to easily locate all the instances the function is referenced throughout your code.

Go To Symbol

Brings up a pick list of all functions and variables within the code. Clicking on a function or variable will take you to the location of that variable/function. This allows you to quickly locate specific functions or variables within your code.

Change All Occurrences

Right click on text and have all occurrences of that text throughout the code highlighted so that it can be changed to something else. This will allow you to quickly change all instances of a value/string within your code.

Format Document/Selection

Will properly format the entire code or the highlighted code with proper indentations. This will help clean up your code making it easier to read.

Errors

If the expression is invalid, your browser will alert you and you’ll need to debug before being able to save. If you want you can also comment out your code so that you can save what you have so that you can come back and work on the code later.

Additionally, you can see where the possible errors are in your code by looking for the red line under the text and the red lines in the scrollbar on the right side of the editor.

Data events

If your data events expression is valid, upon saving you will notice the ‘Data Events’ button text now shows ‘(Enabled)’.

Did this answer your question?