Integrate a website to a record page using iframe HTML element

Level: intermediate

Case description

Create a WEB tab on the record edit page in the Accounts section. The tab will contain a site which URL will be specified in the Web field.

Case implementation algorithm

Place the component on the record edit page of the [Accounts] section.

For this, create the Account edit page replacing schema in the custom package. The procedure for creating a replacing schema is covered in the Client module. Add the following source code to the replacing schema:

AccountPageV2

define("AccountPageV2", [], function() {
    return {
        entitySchemaName: "Account",
        diff: /**SCHEMA_DIFF*/[
            // Adding the [WEB] tab.
            {
                "operation": "insert",
                "name": "WebTab",
                "values": {
                    "caption": "WEB",
                    "items": []
                },
                "parentName": "Tabs",
                "propertyName": "tabs",
                "index": 1
            },
            // Adding IFrameControl component.
            {
                "operation": "insert",
                "name": "UsrIframe",
                "parentName": "WebTab",
                "propertyName": "items",
                "values": {
                    "itemType": Terrasoft.ViewItemType.IFRAMECONTROL,
                    "src": {
                        "bindTo": "getSource"
                    }
                }
            }
        ]/**SCHEMA_DIFF*/,
        methods: {
            // Used to bind data.
            getSource: function() {
                return this.get("Web");
            }
        }
    };
});

Here, the configuration objects of the WEB tab and the component for displaying Terrasoft.controls.IframeControl. Binding the data of the Web column to the src property of the component is performed with the getSource() method.

After saving the schema and reloading the application page, the WEB tab will appear on the edit page of a section record.The tab will display a web page by the URL specified in the Web field (Fig. 1). If the Web field is empty then the tab will be empty too.

Fig. 1. Case result