Use schema-form

{{cookiecutter.repo_name}}/{{cookiecutter.module_folder}}/static/dashboard/{{cookiecutter.panel_group}}/{{cookiecutter.panel}}s/create/create.service.js

@@ -39,7 +39,7 @@
   ];
 
   function createService(
-    $location, policy, actionResult, gettext, $qExtensions, wizardModalService, toast, model, events, resourceType, createWorkflow
+    $location, policy, actionResult, gettext, $qExtensions, wizardModalService, toast, model, events, resourceType, workflow
   ) {
 
     var scope;
@@ -59,7 +59,7 @@
 
     function initScope($scope) {
       scope = $scope;
-      scope.workflow = createWorkflow;
+      scope.workflow = workflow;
       scope.model = model;
       scope.$on('$destroy', function() {
       });
@@ -71,7 +71,7 @@
       scope.selected = selected;
       return wizardModalService.modal({
         scope: scope,
-        workflow: createWorkflow,
+        workflow: workflow,
         submit: submit
       }).result;
     }

{{cookiecutter.repo_name}}/{{cookiecutter.module_folder}}/static/dashboard/{{cookiecutter.panel_group}}/{{cookiecutter.panel}}s/create/info/info.html

@@ -1,12 +1,8 @@
 <div ng-controller="create{{cookiecutter.panel_func}}InfoController as ctrl">
-  <div class="row">
-    <div class="col-xs-12">
-      <div class="form-group">
-        <label class="control-label" for="{{cookiecutter.panel}}-name" translate>{{cookiecutter.panel_func}} Name</label>
-        <input name="{{cookiecutter.panel}}-name" type="text" class="form-control" id="{{cookiecutter.panel}}-name"
-               ng-model="model.newSpec.name"
-               placeholder="{$ 'Name of the {{cookiecutter.panel}} to create.'|translate $}">
-      </div>
-    </div>
-  </div>
+  <form name="schemaForm"
+        sf-schema="ctrl.schema"
+        sf-form="ctrl.form"
+        sf-model="ctrl.model">
+  </form>
 </div>
+

{{cookiecutter.repo_name}}/{{cookiecutter.module_folder}}/static/dashboard/{{cookiecutter.panel_group}}/{{cookiecutter.panel}}s/create/info/{{cookiecutter.panel}}.info.controller.js

@@ -36,5 +36,111 @@
 
   function create{{cookiecutter.panel_func}}InfoController($q, $scope, basePath, api, gettext) {
     var ctrl = this;
+
+    var createInfoSchema = {
+      type: 'object',
+      properties: {
+        name: {
+          title: gettext('Name'),
+          type: 'string'
+        },
+        description: {
+          title: gettext('Description'),
+          type: 'string'
+        },
+        enabled: {
+          title: gettext('Enabled'),
+          type: 'boolean',
+          default: true
+        },
+        size: {
+          title: gettext('Size'),
+          type: 'string',
+          default: 'M'
+        },
+        base: {
+          title: gettext('Base'),
+          type: 'string'
+        },
+        flavor: {
+          title: gettext('Flavor'),
+          type: 'string'
+        },
+        topping: {
+          title: gettext('Topping'),
+          type: 'string'
+        }
+
+      },
+      required: ['name', 'base']
+    };
+
+    var createInfoForm = [
+      {
+        type: 'section',
+        htmlClass: 'row',
+        items: [
+          {
+            type: 'section',
+            htmlClass: 'col-sm-12',
+            items: [
+              // info tab
+              {
+                key: 'name',
+                placeholder: gettext('Name of the {{cookiecutter.panel}} to create.')
+              },
+              {
+                key: 'description',
+                type: 'textarea'
+              },
+              {
+                key: 'enabled',
+                type: 'checkboxes',
+                titleMap: [
+                  {value: true, name: ''},
+                ]
+              },
+              // spec tab
+              {
+                key: 'size',
+                type: 'radiobuttons'
+                titleMap: [
+                  // get options from API
+                  {value: 'S', name: gettext('Small')},
+                  {value: 'M', name: gettext('Medium')},
+                  {value: 'L', name: gettext('Large')},
+                  {value: 'XL', name: gettext('Extra Large')}
+                ]
+              },
+              {
+                key: 'base',
+                type: 'select'
+                titleMap: [
+                  // get options from API
+                ]
+              },
+              {
+                key: 'flavor',
+                type: 'select'
+                titleMap: [
+                  // get options from API
+                ]
+              },
+              {
+                key: 'topping',
+                type: 'checkboxes'
+                titleMap: [
+                  // get options from API
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ];
+
+    ctrl.schema = createInfoSchema;
+    ctrl.form = createInfoForm;
+    ctrl.model = model.spec;
   }
 })();

{{cookiecutter.repo_name}}/{{cookiecutter.module_folder}}/static/dashboard/{{cookiecutter.panel_group}}/{{cookiecutter.panel}}s/create/{{cookiecutter.panel}}-model.js

@@ -25,26 +25,32 @@
 
   function {{cookiecutter.panel}}Model(api) {
     var model = {
-      newSpec: {},
+      spec: {},
 
       // API methods
       init: init,
       create{{cookiecutter.panel_func}}: create{{cookiecutter.panel_func}}
     };
 
-    function initNewSpec() {
-      model.newSpec = {
-        name: null,
+    function initSpec() {
+      model.spec = {
+        name: null,  // text required
+        description: null,  // textarea
+        enabled: true,  // checkbox
+        size: null,  // radio
+        base: "",  // select required
+        flavor: "",  // select
+        topping: null,  // checkboxes
       };
     }
 
     function init() {
       // Reset the new {{cookiecutter.panel_func}} spec
-      initNewSpec();
+      initSpec();
     }
 
     function create{{cookiecutter.panel_func}}() {
-      var finalSpec = angular.copy(model.newSpec);
+      var finalSpec = angular.copy(model.spec);
 
       cleanNullProperties(finalSpec);