Display additional columns in the section list in the mobile app

Question

By default, the mobile application wizard allows you to add only two fields to the section list.

Is it possible to increase the number of displayed fields?

Answer

The list can show not only the displayed columns but also display values generated based on the values of several columns. If complex formatting is used, or if it required to display different values depending on certain conditions, column values can be specified as functions (using the Terrasoft.sdk.GridPage.setPrimaryColumn() and Terrasoft.sdk.GridPage.setSecondaryColumn() methods):

Terrasoft.sdk.GridPage.setPrimaryColumn('Account', {
	columns: ['Name', 'PrimaryContact'],
	convertFunction: function(values) {
		if (!Ext.isEmpty(values.PrimaryContact)) {
			return values.Name + ' (' + values.PrimaryContact + ')';
		} else {
			return values.Name;
		}
	}
});

You can also specify additional columns when selecting the value of the lookup field. This is done similarly to a grid, but only the Terrasoft.sdk.LookupGridPage class is used:

Terrasoft.sdk.LookupGridPage.setSecondaryColumn ("Account", "PrimaryContact");

The alternative option for expanding the capabilities of the grid is to change the template of the grid elements:

Terrasoft.util.writeStyles(
	".div-table {",
		"display:table;",
		"width:100%;",
	"}",
	".div-table-row {",
		"display:table-row;",
		"width:100%;",
		"clear:both;",
	"}",
	".div-table-col {",
		"float:left;",
		"display:table-column;",
		"min-width:50%;",
	"}",
	".div-table-col-button {",
		"float:right;",
		"display:table-column;",
	"}"
);

Ext.define("MyCustomList", {
	override: "Ext.Terrasoft.List",
 
	initializeItemTpl: function() {
		this.callParent(arguments);
		var store = this.getStore();
		var model = store.getModel();
		var modelName = model.getName();
		if (modelName === "Account") {
			var tpl = this.getItemTpl();
			tpl.html =
			"<div class=\"x-list-item-tpl div-table\">" +
				"<div class=\"div-table-row\">" +
					"<div class=\"div-table-col\">{[this.applyPrimaryColumn(values)]}</div>" +
					"<div class=\"div-table-col-button\">{Phone}</div>" +
				"</div>" +
				"<div class=\"div-table-row\">" +
					"<div class=\"div-table-col\">{[this.applySecondaryColumn(values)]}</div>" +
					"<div class=\"div-table-col-button\">{Web}</div>" +
				"</div>" +
			"</div>";
		}
	}
 
});