Some of our Visual Configuration apps are powered by the Google Blockly technology that allows you to configure some aspects of Pricefx by connecting different blocks with drag & drop interface. Although it is very intuitive and easy to use, there might be some hidden features that, if known, would make your life even easier.

This short guide shows how to navigate the workspace, use the toolbox, drag & drop blocks and connect them together in order to create a custom strategy with the Strategy Designer or design an approval workflow with the Workflow Designer.

The screenshots and animations come from the Strategy Designer which leverages the drag & drop workspace extensively, but it works the same everywhere where such a workspace is deployed.

Workspace, Toolbox, and Blocks

Workspace is an area where you connect the blocks together.

Toolbox is where the available blocks are placed. It is usually located to the left of the workspace, but in some cases, it can be placed on either side or even at the top or bottom.

The toolbox usually contains Categories which contain different Blocks that can be connected together following certain rules.

Adding Blocks

To place blocks into the workspace, open the toolbox and simply drag them into the workspace.

Dragging & dropping blocks from the toolbox into the workspace

Deleting Blocks

To delete a block, simply drag it to the trashcan in the bottom right corner and release it.

Deleting a block

You can also highlight a block and hit the Delete key to delete it from the workspace.

Input Types and Block Return Types

Blocks usually cannot be plugged in just anywhere. They can be plugged in with compatible inputs only. Each input has a specified type and each block usually has a return type. For example, the arithmetic block from the Math category expects only blocks whose return type is a number. You cannot plug in a block that returns a text.

Shadow Blocks

Some blocks in the toolbox have pre-configured inputs with default values. For example, the Constrain block in the Math category has shadow numbers and the Get approved price from a price list in the Functions category has a shadow Product ID.

These pre-filled blocks are called shadow blocks. You can tell them apart by their lighter color. They cannot be removed from the block, but they can be replaced without needing to remove them first.

In case you want to change a field in a shadow block, you can do it directly. You do not need to replace it with a real block.

Disabled Blocks

A block can sometimes be disabled. Such a block does not produce any code. You can have these blocks lying around but if you do not plan on using them, it might be better to delete them so they do not clutter your workspace.

Some Visual Configuration apps will automatically disable blocks that are not connected anywhere; Strategy Designer does this, for instance.

Block Options

Most blocks also have a right-click context menu.

The menu usually contains the following items:

Duplicate – Creates a copy of this block.
External/Internal Inputs – Switches the block to a vertical or horizontal layout. This can sometimes improve readability.
Collapse/Expand Block – Collapses the block showing only its text representation. This can sometimes improve readability.
Delete Block – Deletes the block.

Sometimes, you might also see these items:

Disable/Enable Block – Disables or enables the block.
Help – Opens a website with a contextual help.

Accelerators Documentation

Basics of Drag & Drop Visual Configuration