Creating custom forms

Based on the test model CityPortal you can create several forms with a customizable interface and behavior.
The UB client application is implemented on the Sencha Ext.JS platform.
General documentation on forms and their properties
http://docs.sencha.com/extjs/4.2.2/#!/guide/forms

Element positioning on a form

Let's create the RequestList form shown in the figure below.

req_reqList_rezultForm

Add a new form to the menu Administrator -> UI ->Forms

req_reqList_baseProp

[+ ! After entering the basic properties, be sure to save the form with the button in the top toolbar.+]

Here you can describe the two types of forms - Pure ExtJS Form and UB Form. The first one is based on the ExtJs Ext.define base class. All properties and methods of this form are described in the INTERFACES DEFINITION section.
UB Form is inherited from Ext.define and is described in two sections - INTERFACES DEFINITION (setting and location of elements) and METHODS DEFINITION (behavior, events)

The INTERFACE'S DEFINITION section encodes the form interface.

Enter the following code

//@! "do not remove comments below unless you know what you do!"
//@isDefault "false"
//@entity "req_reqList"
//@formType "auto"
//@caption "My request list"
//@description "reqList"
exports.formDef = {
  parentConfig: {
    layout: {
      type: "vbox",
      align: 'stretch'
    }
  },
  items: [
    {
      layout: {
        type: 'hbox' //Horizontal positioning of elements
      },
      items: [
        {
          attributeName: "reqDate", // Request Date
          flex: 1                   // Proportional width of the element
        },
        {
          attributeName: "status",
          flex:3 
        }
      ]
    },
    {
      layout: {
        type: 'hbox' //  Horizontal positioning of elements
      },
      items: [
        {
          attributeName: "department" ,/*Request department*/
          flex: 2 // Proportional width of the element
        },
        {
          attributeName: "subDepartment", /* Subdepartment */
          flex:3 
        }
      ]
    },
    { attributeName: "applicantPhone" /*Applicant`s phone*/},
    { attributeName: "applicantInfo" /*Applicant`s contact info*/},
    { attributeName: "reqText" /*Text of Request*/},
    { attributeName: "answer" /*Request answer*/}
  ]
};

As you can see from the code, the form has a common vbox with a vertical alignment of the fields, inside of which there are two hbox containers that place the fields horizontally with respect to each other.
You can view the form while editing in Visual Designer after saving the code.

Documentation by reference
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.layout.container.VBox

Creating a detail panel on a form

In order to make editing of a specific Department and its Subdepartments more convinient, we can work with both in one window.
https://unitybase.info/api/adminUI/#!/api/UB.ux.UBDetailGrid

detailGrid_rezult

Add the new form

req_depart_baseProp

In INTERFACES DEFINITION add following code:

//@! "do not remove comments below unless you know what you do!"
//@isDefault "false"
//@entity "req_depart"
//@formType "auto"
//@caption "Deaprtments"
//@description "Departaments"
exports.formDef = {
  items: [
    { attributeName: 'name' /* Department Name */},
    { attributeName: 'postAddr' /* Department Address */},
    { attributeName: 'phoneNum' /* Department Phone */},

    // Detail grid SubDepartment
    {
      xtype: 'ubdetailgrid',
      title: 'Subdepartments',
      entityConfig: {
        entity: "req_subDepart", // Associated entity
        method: "select",
        fieldList: [ // Displaying fields
          "ID",
          "name"
        ]
      },
      masterFields: ["ID"],
      detailFields: ["department"]    // Assotiated field
    }
  ]
};

Form methods

Make the RequestDate field on the req_reqList form filled current date and read-only.
On the METHODS` DEFINITION section add following code.

exports.formCode = {
  initUBComponent: function () {
    var me = this;
    me.getField('reqDate').setValue(new Date());
    me.getField('reqDate').readOnly = true;
  }
}

Save and check if scripts work correctly.

Adding a filter to the drop-down list

Reference to the documentation
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.util.Filter-cfg-filterFn

Now you need to add filtering to the drop-down list of SubDepartments relative to the Department's list so that the user sees only the associated rows.
To do this, we use the onDepartChanged event listener. Add it to the existing req_reqList form code.

exports.formCode = {
  initUBComponent: function () {
    var me = this;

    // Add filter
    me.getField('department').addListener('change', me.onDepartChanged, me);
};

And here describe the event handler

onDepartChanged: function () {
  var me = this;
  var subDepartField = me.getField('subDepartment');

  subDepartField.setValue(null);
  subDepartField.getStore().filter(new Ext.util.Filter({
    id: 'toDocumentIDFilter',
    property: 'department',
    exactMatch: true,
    value: me.getField('department').getValue()
  }));
  subDepartFieldCombo = this.getUBCmp('attrSubDepartment');
}

Loading and displaying documents in the form. Create a file storage

The entity req_reqList has the attribute reqDoc, which is responsible for the ability to attach to the application a digital document.
To store documents for the project create a new repository
in the blobStores section of ubConfig.json add a new description of the store

{
  "name": "attach",             // Unique blobStore name.
  "path": ".\\docs\\attach\\",  // The path to store root folder
  "storeSize": "Medium",        // Approximate number of files to store. Simple = up to  10000
  "isDefault": false,           // Is this store default for application
  "historyDepth": 2             // Number of stored versions
}

To create a store on the file system execute the command
npx ubcli createStore

To add a document to the form, go to INTERFACE'S DEFINITION of the req_reqList form.
Add the following code there, placing it as a last element of items.

{
  attributeName: "reqDoc",
  expanded: true,            // Show on form
  height: 200,
  layout: 'auto',            // Auto width
  contentTypeMapping: {'image/jpeg': 'UB.ux.UBImg'}
}

More information about the properties of documents on the client side is available here. https://unitybase.info/api/adminUI/#!/api/UB.ux.UBDocument
Create a request and check the operation of all functions.

request_creating.png
Next step