In this article

Simple Case of SelectView

Here is how to implement SelectView for selecting any value from a drop-down list of values:

"fields" : {
       "SelectViewOption": {
                    "label": "SelectView Label",
                    "viewClass": "SelectView",
                    "required" : true,
                    "model": {
                        "1": "One",
                        "2": "Two",
                        "3": "Three"
                    "prompt": "Choose an option"

Example above would produce a drop-down menu like this:

Please note that prompt should always be present in this representation.

It is worth to mention, also, that prompt in this viewClass replaces the placeholder.

Using dynamic select models

The model property can itself be a JSON object containing the values or it can be a string containing a name of a function exposed by a component that returns such a JSON object as it is indicated in Fields Object definition.

Here an example of SelectView class usage with model property being a string value:

"actions": {
    "updateHello": {
        "main": "./lib/actions/updateHello.js",
        "title": "Update Hello",
        "fields": {
            "dataType": {
                "viewClass": "SelectView",
                "label": "Data type",
                "required": false,
                "model": "getDataTypes",
                "prompt": "Please select a data type"

In this example the value for the "model": "getDataTypes" is coming from updateHello.js program where getDataTypes is exposed like this for example:

exports.getDataTypes = getDataTypes;

function getDataTypes(cfg, callback) {

    var data = {};
    data.type1 = 'data type #1';
    data.type2 = 'data type #2';
    data.type3 = 'data type #3';

    setTimeout(function() {
        callback(null, data);
    }, 500);

Function containing this parameter is very simplistic in this case, however it is just an example of the implementation. The resulting menu would look like this:

Advance case of dynamic select model

In more advanced cases the representing function can be made more flexible. Such is the case in Sphereio-component where the component.json contains action like this:

"createProduct": {
            "main": "./lib/actions/createProduct.js",
            "title": "Create a product",
            "fields": {
                "productType": {
                    "viewClass": "SelectView",
                    "label": "Product type",
                    "required": false,
                    "model": "getProductTypeSelectModel",
                    "prompt": "Please select a product type"
            "dynamicMetadata": true

Here the getProductTypeSelectModel is defined in helper.js in the following way:

exports.getProductTypeSelectModel = function getProductTypeSelectModel(cfg, callback) {

    sphere.createServiceClient('productTypes', cfg).fetch()

    function handleResult(data) {
        var productTypes = data.body.results;
        var result = {};
        productTypes.forEach(function(productType) {
            result[] =;
        callback(null, result);

Which is then exposed in createProduct.js this way:

var sphere = require('../sphere.js');
var messages = require('../messages.js');
var helper = require('../helpers.js');
var attributeManager = require('../attributeManager.js');
var metaModel = require('../metaModel.js');

exports.getMetaModel = getMetaModel;
exports.process = processAction;
exports.getProductTypeSelectModel = helper.getProductTypeSelectModel;

This is just mere example for demonstration purposes only and it is not required to follow this method identically. It is here to demonstrate the flexibility of SelectView view class.