The Airavata Django Portal supports customization of the user interface used to configure an application input. For example, instead of the default text input box for a string input, with customization the UI can be configured to be a drop down list of options.
To configure application inputs one needs to provide JSON configuration in the Advanced Input Field Modification Metadata field of the application input. To get there:
{ "editor": { "ui-component-id": "textarea-input-editor", "config": { "rows": 6 }, "validations": [ { "type": "min-length", "value": 10 }, { "type": "max-length", "value": 200 }, { "type": "regex", "value": "^[XYL\\s]+$", "message": "Target sequence may only contain letters X, Y and L." } ] } }
You can hide/show inputs based on the values of other inputs. For example, if the option selected in input A is ‘list-of-urls’ then you can have input B show a field to upload a file.
{ "editor": { "dependencies": { "show": { "Select reading options": { "comparison": "equals", "value": "list-urls" } } } } }
See code comment on evaluateDependencies() for more information on how to define expressions.
{ "editor": { "ui-component-id": "checkbox-input-editor", "config": { "options": [ { "value": "a", "text": "A label" }, { "value": "b", "text": "B label" }, { "value": "c", "text": "C label" } ] } } }
{ "editor": { "ui-component-id": "radio-button-input-editor", "config": { "options": [ { "value": "breakfast", "text": "Breakfast" }, { "value": "lunch", "text": "Lunch" }, { "value": "dinner", "text": "Dinner" } ] } } }
{ "editor": { "ui-component-id": "select-input-editor", "config": { "options": [ { "value": "breakfast", "text": "Breakfast" }, { "value": "lunch", "text": "Lunch" }, { "value": "dinner", "text": "Dinner" } ] } } }
Displays a slider for picking a value between some minimum and maximum value.
{ "editor": { "ui-component-id": "slider-input-editor", "config": { "min": 32, "max": 212, "step": 0.1, "valueFormat": { "percentage": true }, "displayFormat": { "percentage": true } } } }
Like the Slider component but there are two sliders, one for selecting the beginning and one for selecting the end of a range.
All of the options of the Slider component, plus:
{ "editor": { "ui-component-id": "range-slider-input-editor", "config": { "min": 32, "max": 212, "step": 0.1, "valueFormat": { "percentage": true }, "displayFormat": { "percentage": true }, "delimiter": "," } } }
The Autocomplete UI component looks up matching entries for the given substring typed by the user. This one requires that a custom Django app be developed to implement the REST API for returning autocomplete suggestions.
{ "search": "mammal", "results": [ { "text": "Horse", "value": "horse" }, { "text": "Mouse", "value": "mouse" } ] }
{ "search": "horse", "results": [ { "text": "Horse", "value": "horse" } ] }
{ "detail": "No matching value was found." }
To create the REST API backend needed by the Autocomplete component, first you need a create a custom Django app. See Custom Django Apps for more information.
Here's a simple implementation of a view function that looks up words in the system dictionary file:
def test_autocomplete_search(request): """Find matching words for given search string.""" import re if 'search' in request.GET: query = request.GET['search'] pattern = re.compile(re.escape(query), re.IGNORECASE) elif 'exact' in request.GET: query = request.GET['exact'] pattern = re.compile(r"^" + re.escape(query) + r"$") else: return generic_json_exception_response( "Missing required query parameter: one of 'search' or 'exact'", status=400) matches = [] with open("/usr/share/dict/words", 'r') as f: matches = [line.strip() for line in f if pattern.search(line)] # TODO: if 'exact', make sure len(matches) == 1. if 0, then return 404 if 'exact' in request.GET and len(matches) == 0: return generic_json_exception_response(f"No match for exact = {request.GET['exact']}", status=404) return JsonResponse({ "search": query, "results": [{"text": m, "value": m} for m in matches[:20]] })
See also a real world example miga-autocomplete.
{ "editor": { "ui-component-id": "autocomplete-input-editor", "config": { "url": "/custom/search/" } } }