{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":37406,"path":"order-management/csv_layout_upload.md","title":"CSV layout upload","bundle":null,"doc_type":null,"release":"australia","body":"\n# CSV layout upload\n\nLearn how to create and upload a CSV file that contains a layout specification.\n\nLayouts are defined in a blueprint. When more than one layout is defined for a blueprint, end users rotate through them using the alternate layout button in the upper-right corner of the buyside UI.\n\nLayouts are defined via CSV file that contains all instructions for the layout. For ease of administration, we recommend that admins build their layout in a spreadsheet \\(Google Sheets, Microsoft Excel, or similar\\) and export to CSV format.\n\n## Creating and editing a layout\n\nAccess a layout from its corresponding blueprint administration page.\n\n1.  In the CPQ Admin navigation pane, click **Blueprints** \\(2\\).\n2.  Click the Layouts tab \\(3\\).\n3.  Click the name of the blueprint you want to access.\n\n\\[Omitted image \"cpq-csv-layout-upload-layouts-tab.png\"\\] Alt text: CSV layout upload\n\nTo start a new layout, click **Create Layout**. To edit an existing layout, click the name of a layout in the list.\n\nYou can also edit a layout in the Layout Wizard. After you redeploy your blueprint, the new UI changes appear on the buyside.\n\nWhen you begin a new layout, the New Layout window opens. You can import a CSV file by dropping it in the box or click to select it from your computer. \\(i\\) You can also download a sample layout file for your reference. \\(ii\\)\n\n[Sample layout file](https://drive.google.com/file/d/1lzNW_jGkdzdUGwm9rh8xL9BeSxhv3MEJ/view?usp=sharing)\n\n\\[Omitted image \"cpq-csv-layout-upload-new-layout.png\"\\] Alt text: CSV layout upload\n\nWhen you edit an existing layout:\n\nClick **Export** to download the current layout file. \\(a\\)\n\nImport a layout CSV file by clicking **Replace** \\(b\\).\n\nClick **Save** \\(c\\) to replace the current layout with the edited layout. If CSV file upload fails, all errors found in the file will be shown to the administrator in an error dialog.\n\n\\[Omitted image \"cpq-csv-layout-upload-example-layout.png\"\\] Alt text: CSV layout upload\n\n## Using layout CSV file upload\n\nFor a thorough introduction to the layout CSV format, view the following 26-minute video:\n\n[Layout CSV Overview](https://drive.google.com/file/d/1htNUPvKa168ZdBF6qXeyIEbTGJljvlyg/view?usp=sharing)\n\nFor an example of how a layout CSV is used, view the following 4-minute video:\n\n[HiTech Layout Overview](https://drive.google.com/file/d/1sVs53kC6CBvRRbgqDD12Bq0ofwKI36Rd/view?usp=sharing)\n\nDownload the corresponding HiTech Layout CSV file:\n\n[HiTech layout CSV file](https://drive.google.com/file/d/10soQrWkXtQajYb8bce68slzFxgMvmRTX/view?usp=sharing)\n\n## Layout CSV format\n\nColumn headings are lower case.\n\nThe type column defines the layout components. The following table shows valid values for this column.\n\n|Type value|Description|\n|----------|-----------|\n|tierDef|Properties: Pages, PagesWithLabels, PagesWithNavigation, ExpandableSection, Tab, TabWithNavigation, VerticalTab, VerticalTabWithNavigation, Accordion, AccordionWithNavigation|\n|tier| |\n|columnset| |\n|image| |\n|productlist| |\n|productlistcolumn| |\n|field| |\n\nThe path column value format gives a visual cue to the placement of the element override source label, and is not currently used by the application. Leave it empty.\n\n`label` defines the label to display to the end-user in the UI for tiers and fields.\n\n`variablename` defines a unique identifier for a tier or field.\n\n-   For tiers, administrator should define distinct values.\n-   For fields, populate the field variable name.\n\nThe component display type column defines how a field should be displayed. The following types are available.\n\n<table id=\"table_xqt_fyn_bhc\"><thead><tr><th>\n\nField type\n\n</th><th>\n\nComponent display types\n\n</th></tr></thead><tbody><tr><td>\n\nText\n\n</td><td>\n\nReadOnlyText\n\n Text\n\n TextArea\n\n Date\n\n</td></tr><tr><td>\n\nBoolean\n\n</td><td>\n\nBoolean\n\n Radio\n\n RadioButtons\n\n</td></tr><tr><td>\n\nNumber\n\n</td><td>\n\nNumber\n\n Slider\n\n NumberWithSubmit\n\n ReadOnlyText\n\n ReadOnlyCurrency\n\n FormattedNumber\n\n</td></tr><tr><td>\n\nPicklist \\(single-select\\)\n\n</td><td>\n\nExtended picklist\n\n Extended picklistDisplayOnly\n\n Picklist\n\n ReadOnly picklist\n\n Radio\n\n RadioButtons\n\n SingleSelect picklistGrid\n\n VerticalRadio\n\n VisualPicker\n\n</td></tr><tr><td>\n\nPicklist \\(multi-select\\)\n\n</td><td>\n\nMultiSelectExtended picklist\n\n MultiSelectExtended picklistDisplayOnly\n\n MultiSelect picklist\n\n MultiSelect picklistGrid\n\n MultiSelectVisualPicker\n\n Checkbox\n\n VerticalCheckbox\n\n</td></tr></tbody>\n</table>`columnorder` is relevant for components in a column set. Used to provide the sort order of the Fields based on screen resolution in the responsive UI.\n\n`classname` is used to reference predefined classes available in CPQ. For example, when placing an image, a class can define the flow of fields around that image. Add these class names to the layout CSV file in the className column. As max-height and grid controls interact with the width of the browser, we recommend you experiment with each class distinctly, exploring how the class responds to a variety of browser sizes.\n\n<table id=\"table_z23_xkb_nhc\"><thead><tr><th>\n\nEffect\n\n</th><th>\n\nApplies to\n\n</th><th>\n\nSupported classes\n\n</th><th>\n\nNotes and examples\n\n</th></tr></thead><tbody><tr><td rowspan=\"4\">\n\nGrid\n\n</td><td rowspan=\"4\">\n\nFields, Images\n\n</td><td>\n\ntopleft1col1row, topleft1col2row ... topleft1col6row\n\n</td><td>\n\ntopleft1col1row \\{ grid-column: 1/2; \\}\n\n topleft1col2row \\{ grid-column: 1/2; grid-row: 1/3; \\}\n\n topleft1col3row \\{ grid-column: 1/2; grid-row: 1/4; \\}\n\n topleft1col4row \\{ grid-column: 1/2; grid-row: 1/5; \\}\n\n topleft1col5row \\{ grid-column: 1/2; grid-row: 1/6; \\}\n\n topleft1col6row \\{ grid-column: 1/2; grid-row: 1/6; \\}\n\n</td></tr><tr><td>\n\ntopleft2col1row, topleft2col2row ... topleft2col6row\n\n</td><td>\n\ntopleft2col1row \\{ grid-column: 1/3; \\}\n\n topleft2col2row \\{ grid-column: 1/3; grid-row: 1/3; \\}\n\n topleft2col3row \\{ grid-column: 1/3; grid-row: 1/4; \\}\n\n topleft2col4row \\{ grid-column: 1/3; grid-row: 1/5; \\}\n\n topleft2col5row \\{ grid-column: 1/3; grid-row: 1/6; \\}\n\n topleft2col6row \\{ grid-column: 1/3; grid-row: 1/6; \\}\n\n</td></tr><tr><td>\n\ntopleft3col1row, topleft3col2row ... topleft3col6row\n\n</td><td>\n\ntopleft3col1row \\{ grid-column: 1/4; \\}\n\n topleft3col2row \\{ grid-column: 1/4; grid-row: 1/3; \\}\n\n topleft3col3row \\{ grid-column: 1/4; grid-row: 1/4; \\}\n\n topleft3col4row \\{ grid-column: 1/4; grid-row: 1/5; \\}\n\n topleft3col5row \\{ grid-column: 1/4; grid-row: 1/6; \\}\n\n topleft3col6row \\{ grid-column: 1/4; grid-row: 1/6; \\}\n\n</td></tr><tr><td>\n\ntopright1col1row, topright1col2row ... topright1col6row\n\n</td><td>\n\ntopright1col1row \\{ grid-column: -2/-1; \\}\n\n topright1col2row \\{ grid-column: -2/-1; grid-row: 1/3; \\}\n\n topright1col3row \\{ grid-column: -2/-1; grid-row: 1/4; \\}\n\n topright1col4row \\{ grid-column: -2/-1; grid-row: 1/5; \\}\n\n topright1col5row \\{ grid-column: -2/-1; grid-row: 1/6; \\}\n\n topright1col6row \\{ grid-column: -2/-1; grid-row: 1/6; \\}\n\n</td></tr><tr><td>\n\nHeight\n\n</td><td>\n\nFields\n\n</td><td>\n\nmh5, mh10, mh15 ... mh40\n\n</td><td>\n\nMaximum height from 5 rem to 40 rem, in increments of 5\n\n</td></tr><tr><td>\n\nWidth\n\n</td><td>\n\nFields\n\n</td><td>\n\nw5, w10, w15 ... w40\n\n</td><td>\n\nMaximum width from 5 rem to 40 rem, in increments of 5\n\n</td></tr><tr><td>\n\nGrid column width\n\n</td><td>\n\nFields\n\n</td><td>\n\nlc-15m-15max, lc-15m-20max, lc-15m-25max, lc-15m-30max\n\n</td><td>\n\nThese classes set the width of the columns in the layout grid.-   lc: layout column\n-   15m: width of 15 rem\n-   15max: maximum width of 15 rem\n\n</td></tr><tr><td>\n\nDisplay vertically, align center\n\n</td><td>\n\nPicklist Fields\n\n</td><td>\n\nvertical-layout, align-center\n\n</td><td>\n\nDefault: horizontal \\(when layout is vertical, default is left\\)\n\n</td></tr><tr><td>\n\nHide field label, hide field option label\n\n</td><td>\n\nDisplay components: Extended picklist, MultiSelectExtended picklist\n\n</td><td>\n\nhide-field-label, hide-field-option-label\n\n</td><td>\n\n \n\n</td></tr></tbody>\n</table>The value column contains a JSON string to represent properties for element \\(Field or productlistcolumn\\) referenced on that row.\n\n`placeholder` allows the Admin to define placeholder text that will display in a text field until the end-user inputs a value.\n\n## Components with images\n\nFor picklist display components that include images, when options are disabled, the image is faded. Admins can override this behavior and force the image to look normal by applying the `override-disabled` class to the classname field in the layout.\n\n**Note:** An earlier means of defining and editing layouts using JSON is available. When leveraging JSON, the files must be loaded into the application via REST API. Once a layout has been edited via JSON, CSV manipulation is no longer available. If a layout has been edited via JSON, the Current Layout button is disabled.\n\n**Related topics**  \n\n\n[Layout Wizard](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/order-management/layout_wizard.md)\n\n[Layout editor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/order-management/layout_editor.md)\n\n[Configure the Matrix Loader](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/order-management/cpq-using-the-matrix-loader.md)\n\n"}}