New feature: Serverless Workflow code completions

Starting to write a valid workflow can be a bit difficult and requires you to remember the syntax with the node’s properties and the specification’s rules.
We implemented a new feature in Serverless Workflow Editor to guide the user and make this process easier resulting in a richer IntelliSense editor.
Here we will have a quick overview of these features.

Requirements

Here, there is a ready-to-use online version of the Serverless Workflow Editor to try the new functionality using one of the provided samples or creating a new Serverless Workflow.

The new Code Lenses and Code Completions

To implement the new features, we used the Code Lenses and the Code Completions of Monaco Editor, which is the editor used in Serverless Logic Web Tools and the built-in editor in VS Code. This way we ensure to have exactly the same behaviour between the two environments and we reuse the same implementation.
These features are available in JSON and YAML workflows and are powered by 2 language services, depending on the language you use.

The keyboard shortcut to activate the Code Completions is Ctrl+Space, as usual, and some properties, like functions and states, can be activated by the mouse, using the Code Lenses over the property name in the Serverless Workflow file.
When you activate a completion, a dropdown appears to let you choose which suggestion you want. By default with Tab or Shift+Tab, you can move to the next or previous placeholder of the suggestion, and then with Enter, you select your choice. You can always change the suggestion behaviour in VS Code settings.
In some cases, we also implemented “context-based code completions” showing suggestions related to the specific property you are writing.

Create a new Serverless Workflow

If you don’t know by heart the specification, you probably need to switch between the documentation and your Serverless Workflow, during its creation. 

The first feature we show will help you with this initial step. You can activate the Code Completion with Ctrl+Space or the Code Lenses “Create a Serverless Workflow” over the first line. This completion has many placeholders and lets you initialize your workflow with a function, an event and a state.

Editing a Serverless Workflow

There are more code completions we implemented. In this section, we will see more in detail.

Functions node suggestions

For these suggestions, the information is fetched from registered Service Registries on VS Code settings and/or local spec files stored locally in the specs folder:

• Suggest a generic function, to provide the user with a template to start.
• Suggest the operation value in the function node from the imported service

States node suggestions

For these suggestions, the information is taken from all the state names for transition nodes, for functionRef nodes from the functions node and from event names for eventRef nodes.

• Suggest the most common type of states, to provide the user with some templates to start.
• Suggest the names of the possible states for transitions properties in the state node or in eventConditions, defaultCondition and dataConditions nodes.
• Suggest functionRef arguments and functionRef refName or the whole functionRef in a state node fetching them from the Service Registries
• Suggest all the state’s names for start property completion, at the root level
• Suggest the names of the possible events for eventRefs properties.

Events node suggestions

Here we only provide a template for a generic event to help the user create an event.

For instance, you want to create an event “NewGreetEvent” then you create a state and in the eventRefs property, the editor will suggest you the event “NewGreetEvent” while in the transition property you will see the other states as a suggestion.

Conclusion

We are working to make the “learning curve” not too steep, helping people starting with Serverless Workflow, not requiring a deep knowledge of the Serverless Workflow specification.

In addition, avoiding unwanted typos or syntax errors is another advantage of "context-based code completions", where code suggestions are based on possible values taken from the code itself or even from a server.