Blog Posts BPMN DMN

New feature: Serverless Workflow code completions

Blog: Drools & jBPM Blog

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:

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.

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.

The post New feature: Serverless Workflow code completions appeared first on KIE Community.

Leave a Comment

Get the BPI Web Feed

Using the HTML code below, you can display this Business Process Incubator page content with the current filter and sorting inside your web site for FREE.

Copy/Paste this code in your website html code:

<iframe src="https://www.businessprocessincubator.com/content/new-feature-serverless-workflow-code-completions/?feed=html" frameborder="0" scrolling="auto" width="100%" height="700">

Customizing your BPI Web Feed

You can click on the Get the BPI Web Feed link on any of our page to create the best possible feed for your site. Here are a few tips to customize your BPI Web Feed.

Customizing the Content Filter
On any page, you can add filter criteria using the MORE FILTERS interface:

Customizing the Content Filter

Customizing the Content Sorting
Clicking on the sorting options will also change the way your BPI Web Feed will be ordered on your site:

Get the BPI Web Feed

Some integration examples

BPMN.org

XPDL.org

×