Question

Add header container to other pages

20:16 Feb 09, 2021

Hello,

I would like to add this header container to other pages. It comes out of box on OrderPage, but I would like to add it to other pages.

More specifically the container that is above the tabs, but below the actions.

Please see screenshot

Any help appreciated.

Thanks!

3 comments

Best reply

Oleg Drobina

14:41 Feb 12, 2021

Tyler Rainey,

Hello Tyler,

You need to replace the BasePageV2 schema (create a replacing view model for the "Base card schema") with the code similar to the one below:

define("BasePageV2", [], function() {
	return {
		mixins: {},
		messages: {},
		attributes: {},
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		methods: {},
		diff: /**SCHEMA_DIFF*/[
          {
					"operation": "insert",
					"parentName": "CardContentContainer",
					"name": "BasePageReplacedContainer",
					"propertyName": "items",
					"values": {
						"itemType": Terrasoft.ViewItemType.GRID_LAYOUT,
						"items": []
					},
            		"index": 0
          },
          {
					"operation": "insert",
					"parentName": "BasePageReplacedContainer",
					"propertyName": "items",
					"name": "CreatedOn",
            		"bindTo": "CreatedOn",
            		"values": {
                      	"layout": {
							"colSpan": 12,
							"rowSpan": 1,
							"column": 0,
							"row": 0,
                          	"layoutName": "BasePageReplacedContainer"
						},
                    }
 
			},
			{
					"operation": "insert",
					"parentName": "BasePageReplacedContainer",
					"propertyName": "items",
					"name": "CreatedBy",
					"bindTo": "CreatedBy",
                  	"values": {
                      	"className": "Terrasoft.LookupEdit",
                      	"layout": {
							"colSpan": 12,
							"rowSpan": 1,
							"column": 0,
							"row": 1,
                          	"layoutName": "BasePageReplacedContainer"
						},
                    }
			},
          	{
					"operation": "insert",
					"parentName": "BasePageReplacedContainer",
					"propertyName": "items",
					"name": "ModifiedOn",
            		"bindTo": "ModifiedOn",
            		"values": {
                      	"layout": {
							"colSpan": 12,
							"rowSpan": 1,
							"column": 12,
							"row": 0,
                          	"layoutName": "BasePageReplacedContainer"
						},
                    }
 
			},
          {
					"operation": "insert",
					"parentName": "BasePageReplacedContainer",
					"propertyName": "items",
					"name": "ModifiedBy",
            		"bindTo": "ModifiedBy",
            		"values": {
                      	"layout": {
							"colSpan": 12,
							"rowSpan": 1,
							"column": 12,
							"row": 1,
                          	"layoutName": "BasePageReplacedContainer"
						},
                    }
 
			},
          	{
					"operation": "insert",
					"parentName": "BasePageReplacedContainer",
					"propertyName": "items",
					"name": "Account",
            		"bindTo": "Account",
            		"values": {
                      	"layout": {
							"colSpan": 12,
							"rowSpan": 1,
							"column": 0,
							"row": 2,
                          	"layoutName": "BasePageReplacedContainer"
						},
                    }
 
			}
        ]/**SCHEMA_DIFF*/
	};
});

The idea here is in the created "BasePageReplacedContainer" container that is a grid layout view item type that is located at the very top of the page ("index": 0).

Please also note that in case of using the code above the "Account" column can be not displayed in several cases (for example when you open some bulk email edit page you won't see the "Account" column):

It's so because there is no "Account" column in the "BulkEmail" object and the system doesn't disaply what is not present in the object. But when opening a contact record or order record you will be able to see the column:

and

Because both "Contact" and "Order" objects contain the "Account" column. And system columns that are present in the "BaseEntity" object will be always displayed on the page in the added container.

So as a conclusion you need to modify the code I've provide you with, but modify it due to your logic.

Best regards.

Oscar

Roman Rak

10:40 Feb 10, 2021

Hello Tyler,

Hope you're doing well.

Next articles and posts can help to perform your business task:

Also here is an example of realization of own container (Account filtration based on their email addresses):

1. Creating the container and adding the search field:

{
                "operation": "insert",
                "name": "MyFilterContainer",
                "parentName": "LeftGridUtilsContainer",
                "propertyName": "items",
                "index": 0,
                "values": {
                    "id": "MyFilterContainer",
                    "itemType": this.Terrasoft.ViewItemType.CONTAINER,
                    "items": [],
                    "layout": {
                        "column": 25,
                        "row": 1,
                        "colSpan": 4
                    }
                }
            },
            {
                "operation": "insert",
                "parentName": "MyFilterContainer",
                "propertyName": "items",
                "name": "UsrEmail",
                "values": {
                    "bindTo": "UsrEmailFilter",
                    "caption": {"bindTo": "Resources.Strings.UsrEmailFilter"},
                    "layout": {
                        "column": 5,
                        "row": 2,
                        "colSpan": 4
                    },
                    "controlConfig": {
                        "change": {
                            "bindTo": "emailChanged"
                        }
                    }
                }
            }

2. Adding attributes:

  attributes: {
            "UsrEmailFilter": {
                "dataValueType": Terrasoft.DataValueType.TEXT
            },
            "UsrEmails": {
                "dataValueType": Terrasoft.DataValueType.TEXT,
                "values": ""
            }
        },

3. Adding the methods:

emailChanged: function(a, b, c) {
                this.set("UsrEmails", a);
                this.onUsrFilterChanged();
                debugger;
            },
            clearFilter: function() {
                this.set("UsrEmailFilter", "");
                this.onUsrFilterChanged();
            },
 
            onUsrFilterChanged: function() {
                this.reloadGridData();
            },
 
            initQueryFilters: function(esq) {
                this.callParent(arguments);
 
                var usrEmailFilter = this.get("UsrEmails");
 
                if (usrEmailFilter) {
                    esq.filters.add("UsrEmailFilter", this.Terrasoft.createColumnFilterWithParameter(
this.Terrasoft.ComparisonType.CONTAIN, "[Account:Id].Email".substring(), usrEmailFilter));
                } else {
                    esq.filters.removeByKey("UsrEmailFilter");
                }
            }

Best regards,

Roman

Tyler Rainey

21:35 Feb 11, 2021

Roman Rak,

Hello, thanks for you response

I don't think this solves my problem.

I would just like a blank space between the fields groups/tabs and the page actions up top.

Here is a photoshopped screenshot of what I would like highlighted by the red box.

We just want the area ignore the fields inside. Just the header section. Like on orders this exists, I want it turned on for other objects.

Thanks in advance