Dynamic UI in FeatureScript

This weeks FeatureScript tip: creating a dynamic user interface.

One thing that FeatureScript struggles with is creating a user interface that reacts to user inputs and context information. FeatureScript does allow for controlling the visibility of parameters with booleans and enums. In the example below, myLength is only shown if "a" is true.

annotation { "Name" : "A" }
definition.a is boolean;

if(definition.a)
{
	annotation { "Name" : "Hidden if not a" }
	isLength(definition.myLength, LENGTH_BOUNDS);
}

This is a bit limited without logic operators and support for other parameter types. But never fear, there is a solution! Enter editing logic functions. FeatureScript editing logic functions make additional changes to the definition after a user has made changes to the definition of a feature, but before the feature is run. The intent of editing logic is to intelligently set default parameters, but we can use it to make a dynamic UI with the use of hidden parameters.

First step, add an editing logic function:

export function EditingLogicFunction(context is Context, id is Id, olddefinition is map, definition is map, isEditing is boolean) returns map
{
    return definition;   
}

and adjust the feature annotation to include the editing logic function definition

annotation { "Feature Type Name" : "Dynamic UI Feature", "Editing Logic Function":"EditingLogicFunction" }
export const dynamicUI = defineFeature(function(context is Context, id is Id, definition is map)

Now, whenever the definition is changed, we can update the definition in a way that makes the UI a bit more dynamic. We can add a parameter to our definition that is only shown when the hidden property "show C" is true, and use editing logic to set the hidden boolean. Show C is set to "always hidden", ensuring our user does not see it or manipulate it.

annotation { "Name" : "Show Group C", "UIHint": UIHint.ALWAYS_HIDDEN }
definition.showC is boolean;

if(definition.showC)
{
	annotation { "Name" : "Parameter C" }
	isLength(definition.C, LENGTH_BOUNDS);
}

In our editing logic function, we can define what logic will display C:

definition.showC = definition.a && definition.B > 5*millimeter;

Resulting in a UI that responds to our input

And thats it! Create a hidden boolean, and use editing logic to set it. The boolean then controls the visibility of each parameter. From here you can use your imagination for how to create a dynamic user interface. Logic could include checking geometry type of queries, query size, lengths compared to other lengths, evaluations of selected queries, etc.