Configure Layouts for Product Specifications

Use this topic to determine how you can create a layout file to display the extended product specification characteristics. These characteristics are displayed in the attributes train stop of the pages for creating or editing offers. A product specification can

Prerequisites

Here are some of the prerequisites:

• The layout file name must be of the format: <Product Specification Id> -layout.json. For example, 5GSupremo-layout.json.

• The layout file must be uploaded to the CatalogManagement/schema/Layouts directory in UCM. For steps on how to upload the layout file, refer Extension Types.

• The layout file must have the following schema:

{
    "$schema": "http://json-schema.org/schema#",
    "id": "http://example.com/schemas/jet/npi-dynamic-layout-schema.json",
    "title": "NPIDynamicLayout",
    "description": "Describes the model for the NPI Dynamic Layout",
    "definitions": {
        "propertyLayout": {
            "description": "Defines a layout structure for a property",
            "type": "object",
            "properties": {
                "labelHint": {
                    "description": "Defines label for the property",
                    "type": "string"
                },
                "class": {
                    "description": "Class to be applied to this property. Used for overriding input components",
                    "type": "string"
                }
            },
            "additionalProperties": false
        },
        "displayProperties": {
            "description": "Defines structure of displayProperties used by formLayout",
            "type": "array",
            "items": {
                "anyOf": [{
                    "type": "string"
                }, {
                    "type": "object",
                    "patternProperties": {
                        "^[\\$A-Z_a-z][\\$A-Z_a-z0-9/-]*$": {
                            "$ref": "#/definitions/propertyLayout"
                        }
                    }
                }]
            }
        },
        "formLayout": {
            "properties": {
                "labelHint": {
                    "type": "string"
                },
                "displayProperties": {
                    "$ref": "#/definitions/displayProperties"
                }
            },
            "additionalProperties": false
        },
        "singleLayout": {
            "description": "Definition of the single layout structure",
            "type": "object",
            "properties": {
                "description": {
                    "type": "string"
                },
                "layoutType": {
                    "type": "string"
                },
                "layout": {
                    "$ref": "#/definitions/formLayout"
                }
            },
            "additionalProperties": false
        }
    },
    "type": "object",
    "properties": {
        "layouts": {
            "description": "The layouts definition",
            "patternProperties": {
                "^[\\$A-Z_a-z][\\$A-Z_a-z0-9/-]*$": {
                    "$ref": "#/definitions/singleLayout"
                }
            },
            "additionalProperties": false
        }
    },
    "additionalProperties": false
}

How To Go About It

After you have set up your prerequisites, set up the UI layouts in the following way.

Add and Order Fields in a Layout

To make a field visible on the UI, you must define it in layout.json. The order of the fields in the UI is the order of the fields in layout.json. Here's an example.

{
    "layouts": {
        "phone-form": {
            "description": "layout for phone form with grouping support",
            "layoutType": "form",
            "layouts": {
                "apple": {
                    "layoutType": "form",
                    "layout": {
                        "description": "form layout for apple iPhone",
                        "displayProperties": ["storageSpace", "chipName", "batteryCapacity", "operatingSystem"]
                    }
                }
            }
        }
    }
}

Create Groups in a Layout

Here's an example that shows how you can create groups.

{
    "layouts": {
        "phone-form": {
            "description": "layout for phone form with grouping support",
            "layoutType": "form",
            "layouts": {
                "apple": {
                    "layoutType": "form",
                    "layout": {
                        "description": "form layout for apple iPhone",
                        "displayProperties": [{
                            "physical": {
                                "description": "layout for physical group",
                                "layoutType": "form",
                                "layout": {
                                    "labelHint": "Physical",
                                    "displayProperties": ["widthValue", "heightValue", "weightValue", "dateOfManufacture", "dateOfRelease", "detailedDescription"]
                                }
                            }
                        }, {
                            "technical": {
                                "description": "layout for technical group",
                                "layoutType": "form",
                                "layout": {
                                    "labelHint": "Technical",
                                    "displayProperties": ["storageSpace", "chipName", "batteryCapacity", "operatingSystem"]
                                }
                            }
                        }, {
                            "logistics": {
                                "description": "layout for logistics group",
                                "layoutType": "form",
                                "layout": {
                                    "labelHint": "Logistics",
                                    "displayProperties": ["shippingCarriers", "vendorPartNum", "shippingTime"]
                                }
                            }
                        }]
                    }
                }
            }
        }
    }
}

Override Labels

You must use the labelHint property to override UI labels. Here's an example of shippingMethod that shows how to override labels.

{
    "layouts": {
        "phone-form": {
            "description": "layout for phone form with grouping support",
            "layoutType": "form",
            "layouts": {
                "apple": {
                    "layoutType": "form",
                    "layout": {
                        "description": "form layout for apple iPhone",
                        "displayProperties": [{
                            "physical": {
                                "description": "layout for physical group",
                                "layoutType": "form",
                                "layout": {
                                    "labelHint": "Physical",
                                    "displayProperties": ["widthValue", "heightValue", "weightValue", "dateOfManufacture", "dateOfRelease", "detailedDescription"]
                                }
                            }
                        }, {
                            "technical": {
                                "description": "layout for technical group",
                                "layoutType": "form",
                                "layout": {
                                    "labelHint": "Technical",
                                    "displayProperties": ["storageSpace", "chipName", "batteryCapacity", "operatingSystem"]
                                }
                            }
                        }, {
                            "logistics": {
                                "description": "layout for logistics group",
                                "layoutType": "form",
                                "layout": {
                                    "labelHint": "Logistics",
                                    "displayProperties": ["shippingCarriers", {"shippingMethod":{"labelHint": "Available Shipping Methods"}}, "shippingTime"]
                                }
                            }
                        }]
                    }
                }
            }
        }
    }
}

Override UI Controls

You must use the class property to override UI controls. Here's an example of shippingRequiredFlag that shows how to override the input component for a field.

{
    "layouts": {
        "phone-form": {
            "description": "layout for phone form with grouping support",
            "layoutType": "form",
            "layouts": {
                "apple": {
                    "layoutType": "form",
                    "layout": {
                        "description": "form layout for apple iPhone",
                        "displayProperties": [{
                            "physical": {
                                "description": "layout for physical group",
                                "layoutType": "form",
                                "layout": {
                                    "labelHint": "Physical",
                                    "displayProperties": ["widthValue", "heightValue", "weightValue", "dateOfManufacture", "dateOfRelease", "detailedDescription"]
                                }
                            }
                        }, {
                            "technical": {
                                "description": "layout for technical group",
                                "layoutType": "form",
                                "layout": {
                                    "labelHint": "Technical",
                                    "displayProperties": ["storageSpace", "chipName", "batteryCapacity", "operatingSystem"]
                                }
                            }
                        }, {
                            "logistics": {
                                "description": "layout for logistics group",
                                "layoutType": "form",
                                "layout": {
                                    "labelHint": "Logistics",
                                    "displayProperties": ["shippingCarriers", "vendorPartNum", {"shippingRequiredFlag":{"class":"boolean-radioset-yn"}}, "shippingTime"]
                                }
                            }
                        }]
                    }
                }
            }
        }
    }
}

Override Field Controls

You must use the following set of values.

Boolean

What you use	How it's rendered
boolean-checkbox	As a check box. This is the default.
boolean-radioset-yn	As a radio set with a Yes or No option.
boolean-radioset-tf	As a radio set with a True or False option.
boolean-dropdown-yn	As a drop-down list with a Yes or No option.
boolean-dropdown-tf	As a drop-down list with a True or False option.

LOV

What you use	How it's rendered
lov-dropdown	As a drop-down list. This is the default.
lov-radioset	As a radio set.