Adding custom action configs - tsgrp/HPI GitHub Wiki

Sometimes you need to provide other configuration information to an action that is only relevant to that specific action (as opposed to modal size which is relevant to all actions). For that scenario we have provided an easy to way to create a view that can augment an action's configuration model.

When you click the edit icon on an action, we look to see if the action you are configuring has a CustomConfigView exposed, and if so we add it to the page, other wise we use the default view for adding arbitrary key/value pairs. The code for that is in hpiactionconfig.js

    //attach the customConfig view (or default) with the whole view model
    var CustomView = (actionModules(actionVM.actionId()) && actionModules(actionVM.actionId()).CustomConfigView) || Action.CustomConfigView;
    //The ^ Capital is the constructor 
    var customView = new CustomView({viewModel : actionVM});
    customView.render();

The custom view is passed a property on options named viewModel. This is a knockback viewmodel built from the action's backbone config model. You can get the model it self at viewModel.model().

The custom view is also passed the trac on the options hash. this.options.trac, useful for getting other trac configs. var objectTypeConfig = app.context.findOrCreateConfig(OTC.Model, this.options.trac)

To create a custom view, go to the action's javascript file (createfolder.js) and add a View definition on the module at CustomConfigView. In the initalize you can setup observables your custom markup requires, and you then applyBindings in the afterRender

    Action.CustomConfigView = Backbone.Layout.extend({
		template: "hpiadmin/actions/customconfig/createfolderconfig",
		initialize: function(){
		    this.options.viewModel.someOtherProperty = kb.observable(this.options.viewModel.model(), "someOtherProperty");
                    //consider it good practice to provide a default
                    this.options.viewModel.someOtherProperty("myDefaultValue");
		},
		afterRender: function(){
			kb.applyBindings(this.options.viewModel, this.$el[0]);
		}
    });

Then in the html:

    <input type="text" data-bind="value: someOtherProperty" />

Now when your config is saved you can access it in the actions runtime view:

    ...
    initialize: function() {
        this.action = this.options.action;
        this.myHandler = this.options.config.get("handler");
        this.viewModel = new ViewModel(this.action, this.myHandler);
        this.myNewProp = this.options.config.get("someOtherProperty");
    },...