Skip to main content
Version: 8.1

Add a color picker button to the record page

Level: intermediate
Example

Add a color picker button to the product page.

1. Create a replacement object schema​

  1. Go to the Configuration section and select a custom package to add the schema.

  2. Click Add → Replacing object on the section list toolbar.

  3. Fill out the schema properties.

    • Set Code to "Product."
    • Set Title to "Product."
    • Set Parent object to "Product."

  4. Add a column to the schema.

    1. Click add_button in the context menu of the Columns node of the object structure.

    2. Click Text → Text (50 characters) in the dropdown menu.

    3. Fill out the properties of the added column.

      • Set Code to "UsrColor."
      • Set Title to " Color."

  5. Click Save, then Publish on the Object Designer’s toolbar.

2. Create a view model schema of the replacement product page​

  1. Go to the Configuration section and select a custom package to add the schema.

  2. Click Add → Replacing view model on the section list toolbar.

  3. Fill out the schema properties.

    • Set Code to "ProductPageV2."
    • Set Title to "Edit page - Product."
    • Set Parent object to "ProductPageV2."

  4. Set up the button layout. To do this, add a configuration object with the settings that determine the button position to the diff array of modifications.

    View the source code of the replacement view model of the product page below.

    ProductPageV2
    define("ProductPageV2", [], function() {
        return {
            /* The name of the record page entity schema. */
            entitySchemaName: "Product",
            /* Display the button on the record page. */
            diff: /**SCHEMA_DIFF*/[
                /* The color picker button. */
                {
                    /* Run the operation that inserts the element to the page. */
                    "operation": "insert",
                    /* The meta name of the parent container to add the button. */
                    "parentName": "ProductGeneralInfoBlock",
                    /* Add the button to the element collection of the parent element. */
                    "propertyName": "items",
                    /* The meta name of the added button. */
                    "name": "ColorButton",
                    /* The properties to pass to the element’s constructor. */
                    "values": {
                        /* Set the type of the added element to the color picker button. */
                        "itemType": this.Terrasoft.ViewItemType.COLOR_BUTTON,
                        /* Bind the value of the control to the view model column. */
                        "value": { "bindTo": "UsrColor" },
                        /* Set up the button layout. */
                        "layout": { 
                            /* The column number. */
                            "column": 5,
                            /* The row number. */
                            "row": 6, 
                            /* The column span. */
                            "colSpan": 12
                        }
                    }
                }
            ]/**SCHEMA_DIFF*/
        };
    });

  5. Click Save on the Designer’s toolbar.

Outcome of the example​

To view the outcome of the example:

  1. Refresh the Products section page.
  2. Open the product page.

As a result, Creatio will add a color picker button to the product page.

Resources​

Package with example implementation