Question

HOW TO DISPLAY A TILE IN THE TAB

Hello,

 

I would like to locate the "CONTACT SECTION' tile in the general tab of the portal section.

Please refer to the screenshot:

 

Below is my code:

 

  • 	diff: /**SCHEMA_DIFF*/[			   
    {
    					"operation": "insert",
    					"name": "Um6pTabsContainer",
    					"parentName": "ActionButtonsContainer",
    					"propertyName": "items",
    					"values": {
    						"className": "Terrasoft.LazyContainer",
    						"itemType": Terrasoft.ViewItemType.CONTAINER,
    						"visible": {"bindTo": "getTabsContainerVisible"},
    						"items": []
    					}
    				},
                  {
    				"operation": "insert",
    				"name": "Tabs",
    				"parentName": "Um6pTabsContainer",
    				"propertyName": "items",
    				"values": {
    				"itemType": Terrasoft.ViewItemType.TAB_PANEL,
    				"activeTabName": "GeneralInfoTab",
    				"classes": {"wrapClass": ["tab-panel-margin-bottom-portal"]},
    				"collection": {"bindTo": "TabsCollection"},
    				"tabs": []
    				}
    			},
     
    			{
    				"operation": "insert",
    				"name": "GeneralInfoTab",
    				"values": {
    				"caption": {
    				"bindTo": "Resources.Strings.GeneralInfoTabCaption"
    				},
    				"visible":true,
    				"items": []
    				},
    				"parentName": "Tabs",
    				"propertyName": "tabs",
    				"index": 0
    			},
     
    			{
    				"operation": "insert",
    				"name": "GeneralInfoTab2",
    				"values": {
    				"caption": {
    				"bindTo": "Resources.Strings.GeneralInfoTab2Caption"
    				},
    				"visible":true,
    				"items": []
    				},
    				"parentName": "Tabs",
    				"propertyName": "tabs",
    				"index": 1
    			},
    				{
    					"operation": "insert",
    					"name": "SectionCaptionCustomerContainer",
    					"propertyName": "items",
    					"parentName": "SeparateModeActionButtonsLeftContainer",
    					"values": {
    						"itemType": Terrasoft.ViewItemType.GRID_LAYOUT,
    						"items": []
    					}
    				},
    				{
    					"operation": "insert",
    					"name": "SectionCaptionLabel",
    					"parentName": "SectionCaptionCustomerContainer",
    					"propertyName": "items",
    					"values": {
    						"itemType": Terrasoft.ViewItemType.LABEL,
    						"caption": {"bindTo": "Resources.Strings.SectionLabelCaption"},
    						"classes": {
    							"labelClass": ["content__title"]
    						},
    						"layout": {
    							"column": 0,
    							"row": 0,
    							"colSpan": 24,
    							"rowSpan": 1
    						},
    					}
    			   	},
    				{
    					"operation": "insert",
    					"parentName": "SectionCaptionCustomerContainer",
    					"name": "PortalSearchText",
    					"propertyName": "items",
    					"values": {
    						"bindTo": "SearchText",
    						"contentType": this.Terrasoft.ContentType.SHORT_TEXT,
    						"caption": {
    								"bindTo": "Resources.Strings.ITXSearchTextPlaceholder"
    							},
    						"labelConfig": {
    							"visible": false
    						},				
    						"layout": { "column": 0, "row": 2, "colSpan": 10, "rowSpan": 1 },
    						"controlConfig": {
    							"placeholder": {
    								"bindTo": "Resources.Strings.ITXSearchTextPlaceholder"
    							},
    						},
    						hasClearIcon: true,
    						clearIconClasses: ["clear-button-style"],
    						"cleariconclick": "$clearSearch",
    					}
    				},
    				{
    					"operation": "insert",
    					"name": "GetOrgButton",
    					"values": {
    						"id": "GetOrgButton",
    						"itemType": 5,
    						"style": "transparent",
    						"classes": {
    							"wrapperClass": [
    								"get-service-button"
    							]
    						},
    						"imageConfig": {
    							"bindTo": "Resources.Images.FindButtonImage"
    						},
    						"visible": true,
    						"selectors": {
    							"wrapEl": "#GetOrgButton"
    						},
    						"enabled": true,
    						"layout": {
    							"colSpan": 0,
    							"rowSpan": 1,
    							"column": 10,
    							"row": 2,
    						}
    					},
    					"parentName": "SectionCaptionCustomerContainer",
    					"propertyName": "items",
    					"index": 3
    				},
    			{"operation": "insert",
    				"name": "GridDataContainer",
    				"parentName": "DataGrid",
    				"propertyName": "items",
    				"values": {	
    					"itemType": Terrasoft.ViewItemType.CONTAINER,
    					//"className": "Terrasoft.AlignableContainer",
    					"classes": {"wrappClass": ["tile-border"]},
    					"visible": true,
    					"items": []	
    				},
    				"index": 0
    			},
    			{"operation": "insert",
    				"name": "GeneralTabTile",
    				"parentName": "GridDataContainer",
    				"propertyName": "items",
    				"values": {
    					"itemType": 5,
    					"imageConfig": {
    							"bindTo": "Resources.Images.ContactButtonImage"
    						},
    					"visible": true,
    					"caption": {bindTo: "Resources.Strings.TileLabelCaption"},
    					"enabled": true,
    						"layout": {
    							"colSpan": 1,
    							"rowSpan": 1,
    							"column": 10,
    							"row": 2,
    						},
    					"items": []
    				},
    			 "index": 0
    			},
    ]/**SCHEMA_DIFF*/,
    	methods: {
    			getTabsContainerVisible: function() {
    					return !(this.get("TabsCollection").isEmpty());
    				},

 

Is there any way to add a border to the "GridDataContainer". The CSS style still not working?

 

Any help is appreciated.

Thank you.

Like 0

Like

3 comments

Hello,

 

If the task is to move the "Contact section" element to the "General" tab, for example, then you need to specify the GeneralInfoTab element as a parent element for the SectionCaptionCustomerContainer. This will automatically move the "Contact section" to the "General" tab.

 

Best regards,

Oscar

Hello Oscar,

 

Thank you for your response.

 

I added the GeneralInfoTab element as a parent element for the SectionCaptionCustomerContainer and even for the GridDataContainer but it didn't work in both cases.

 

Do you have any other recommendations please ?

 

Best regards,

Mouna.

Mouna RACHIDI,

 

Hi,

 

I've used your code locally and was able to move the GridDataContainer by specifying the GeneralInfoTab as a parent for the below element:

{
				"operation": "insert",
				"name": "GridDataContainer",
				"parentName": "GeneralInfoTab",
				"propertyName": "items",
				"values": {	
					"itemType": Terrasoft.ViewItemType.CONTAINER,
					//"className": "Terrasoft.AlignableContainer",
					"classes": {"wrappClass": ["tile-border"]},
					"visible": true,
					"items": []	
				},
				"index": 0
			},

As a result the GeneralTabTile element was also moved to the General tab since its parent (GridDataContainer) was moved to the GeneralInfoTab.

 

Best regards,

Oscar

Show all comments