{"id":23965,"date":"2024-02-15T14:53:34","date_gmt":"2024-02-15T22:53:34","guid":{"rendered":"https:\/\/docs.extraview.com\/v25\/book\/adding-shaded-regions-layouts-1\/"},"modified":"2025-02-12T18:11:57","modified_gmt":"2025-02-13T02:11:57","slug":"adding-shaded-regions-layouts-1","status":"publish","type":"page","link":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/","title":{"rendered":"Adding Shaded Regions to Layouts"},"content":{"rendered":"<p>Layouts with a plain background can look bland. You can improve the look of <em>add<\/em> and <em>edit<\/em> layouts by using shaded regions. Shaded regions allow you to set a background color or a background image to a contiguous group of rows within a layout. The shaded region can also be given a legend. To set up a shaded region on an <em>add<\/em> and <em>edit<\/em> layout, use the following procedure:<\/p>\n<ul>\n<li>\n\t\tCreate two fields in the data dictionary.<\/p>\n<ul>\n<li>\n\t\t\t\tThe first field is used to mark the beginning of the shaded region on the layout. The field must use a naming convention, beginning with the characters SHADE_PRE_. For example, SHADE_PRE_1 is a valid name for the field. The title should be a single space character and the display type should be <strong>Custom<\/strong>. Give the field read-only permission for each role that will use the shaded region<\/li>\n<li>\n\t\t\t\tThe second field is used to mark the end of the shaded region on the layout. The field must use a naming convention, beginning with the characters SHADE_POST_. For example, SHADE_POST_1 is a valid name for the field. The title should be a single space character and the display type should be <strong>Custom<\/strong>. Give the field read-only permission for each role that will use the shaded region<\/li>\n<\/ul>\n<\/li>\n<li>\n\t\tPlace the SHADE_PRE_ and the SHADE_POST_ fields on the layout, giving each a colspan that extends the entire width of the layout. Obviously, the SHADE_PRE_ field is placed at the beginning of the region and the SHADE_POST_ field is placed at the end of the region<\/li>\n<li>\n\t\tTo provide a legend for the shaded region, add an FIELD HTML MODIFIER layout cell attribute to the SHADE_PRE_ field. This attribute should be of the form <strong>LEGEND:Title to the Region<\/strong><\/li>\n<li>\n\t\tIf you require to add a legend in a language other than English, add an attribute in the form <strong>LEGEND_ALT:Title to the Region<\/strong>. If the user&#8217;s locale is not English, this legend will be used rather than the title defined in LEGEND. However, if a language other than English is used within the LEGEND attribute, and no LEGEND_ALT attribute is defined, then this is used as the title to shaded regions. Unlike most of ExtraView&#8217;s localization capability, this does not provide the flexibility to add any number of localized language legends to the legend, and is limited to a single language beyond the default language<\/li>\n<li>\n\t\tTo provide a background color to the shaded region, add a FIELD HTML MODIFIER layout cell attribute to the SHADE_PRE_ field. This attribute should be of the form <strong>BGCOLOR:#nnnnnn<\/strong> where <strong>#nnnnnn<\/strong> is a valid hexadecimal color<\/li>\n<li>\n\t\tTo provide a background image or other CSS style for the shaded region, add an FIELD HTML MODIFIER layout cell attribute to the SHADE_PRE_ field. This attribute should be of the form <strong>STYLE:&#8217;background-image:url(..\/locales\/en_US\/images\/images_light_blue\/TableBg.png)&#8217;<\/strong><\/li>\n<li>\n\t\tTo add a CSS style to the legend, add a FIELD HTML MODIFIER layout cell attribute to the SHADE_PRE_ field. This attribute should be of the form <strong>CSSCLASS:classname<\/strong>. There are two inbuilt CSS styles named <em>legendSmall<\/em> and <em>legendLarge<\/em> that can be used for the <strong>classname<\/strong>.<\/li>\n<li>\n\t\tThis will have the following effect on a layout. Note the legend <strong>Customer Details<\/strong> and the light yellow background around the fields:<\/p>\n<p>\t\t<img decoding=\"async\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/shading_region_on_layout.png\" style=\"width: 90%;\" \/><br \/>\n\t\t<cite>Shading a region on a layout<\/cite><\/p>\n<p>\t\t&nbsp;<\/li>\n<li>\n\t\tYou may style the border of the shaded region with the FIELD HTML MODIFIER layout cell attribute of the form <strong>BORDER_STYLE:<em>style<\/em><\/strong>.&nbsp; For example <strong>BORDER_STYLE:border:2px solid #cc0000<\/strong> will add a thin red border around the shaded region<\/li>\n<li>\n\t\tYou may nest SHADE_PRE_ and SHADE_POST_ fields to create multiple shaded regions within each other on a form. Here is an example:<\/p>\n<p>\t\t<img decoding=\"async\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/multiple_shaded_regions_on_layout.png\" style=\"width: 90%;\" \/><br \/>\n\t\t<cite>Multiple shaded regions on a layout<\/cite><\/li>\n<\/ul>\n<h3>\n\tLayout Cell Attribute Summary of HTML MODIFIERs<\/h3>\n<table border=\"0\" cellpadding=\"2\" cellspacing=\"2\" style=\"width: 100%;\">\n<tbody>\n<tr>\n<td style=\"vertical-align: top;\">\n\t\t\t\tLEGEND:<em>title<\/em><\/td>\n<td>\n\t\t\t\tThis HTML MODIFIER provides&nbsp;the title to the shaded region<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n\t\t\t\tLEGEND_ALT:<em>title<\/em><\/td>\n<td>\n\t\t\t\tThis is an alternative title which is used if the user&#8217;s locale is not English.&nbsp; This allows for a non-English title to be set for the layout<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n\t\t\t\tCSSCLASS:<em>classname<\/em><\/td>\n<td>\n\t\t\t\tThis is a CSS class name that is applied to LEGEND and LEGEND_ALT.&nbsp; The recommended value is <strong>legendLarge<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n\t\t\t\tBGCOLOR:<em>color<\/em><\/td>\n<td>\n\t\t\t\tBGCOLOR is added as an HTML MODIFIER to provide the background shading color for the region.&nbsp; The <em>color<\/em> may be an HTML color name or a hex value such as #123456<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n\t\t\t\tSTYLE:<em>style<\/em><\/td>\n<td>\n\t\t\t\tThis HTML MODIFIER is used as an alternative to BGCOLOR.&nbsp; You should not use both attributes.&nbsp; The STYLE attribute adds a CSS style to the background of the shaded region.&nbsp; Any valid CSS may be entered<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n\t\t\t\tBORDER_STYLE:<em>style<\/em><\/td>\n<td>\n\t\t\t\tThis HTML MODIFIER is used to alter the default style of the border of the shaded region.&nbsp; The default style is a light grey 3 pixel border.&nbsp; For example, you might want to highlight the border around an area of the screen with a thin red line.&nbsp; A value of BORDER_STYLE:2px solid #cc0000 will achieve this effect.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>\n\tCombining Shaded Regions with Folds \/ Pages and HTML Pre \/ Post Fields<\/h3>\n<p>There are limitation on how shaded regions may be nested within Accordion Folds, Paging and HTML Pre \/ Post fields.&nbsp; If the shaded region SHADE_PRE and SHADE_POST fields are on the main <em>add<\/em> or <em>edit<\/em> layouts, <strong><em>and <\/em><\/strong>they are <strong><em>outside <\/em><\/strong>the scope of Accordion Folds, Paging and HTML Pre \/ Post fields they are always rendered.&nbsp; If the SHADE_PRE and SHADE_POST fields are <strong><em>within <\/em><\/strong>the scope of the other fields, they will not render.&nbsp; You can overcome this limitation in one of two ways:<\/p>\n<ol>\n<li>\n\t\tFor Paging layouts, use the BGCOLOR and BORDER_COLOR HTML MODIFIER layout cell attributes within the PAGE_PRE_xxx layout to achieve the shading you desire<\/li>\n<li>\n\t\tUse sub-layouts, with the SHADE_PRE and SHADE_POST fields, plus the fields the enclose within the sub-layout.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Layouts with a plain background can look bland. You can improve the look of add and edit layouts by using shaded regions. Shaded regions allow you to set a background color or a background image to a contiguous group of rows within a layout. The shaded region can also be given a legend. To set&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":23950,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-23965","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding Shaded Regions to Layouts - Product Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Shaded Regions to Layouts - Product Documentation\" \/>\n<meta property=\"og:description\" content=\"Layouts with a plain background can look bland. You can improve the look of add and edit layouts by using shaded regions. Shaded regions allow you to set a background color or a background image to a contiguous group of rows within a layout. The shaded region can also be given a legend. To set...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Product Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-13T02:11:57+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/\",\"url\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/\",\"name\":\"Adding Shaded Regions to Layouts - Product Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\"},\"datePublished\":\"2024-02-15T22:53:34+00:00\",\"dateModified\":\"2025-02-13T02:11:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ExtraView 25\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Administration Guide\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Site Configuration Menu\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Design Center\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"Relationship Layouts\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/\"},{\"@type\":\"ListItem\",\"position\":7,\"name\":\"Adding Shaded Regions to Layouts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"name\":\"ExtraView Product Documentation\",\"description\":\"ExtraView Documentation\",\"publisher\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\",\"name\":\"ExtraView Corporation\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"contentUrl\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"width\":512,\"height\":512,\"caption\":\"ExtraView Corporation\"},\"image\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Shaded Regions to Layouts - Product Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/","og_locale":"en_US","og_type":"article","og_title":"Adding Shaded Regions to Layouts - Product Documentation","og_description":"Layouts with a plain background can look bland. You can improve the look of add and edit layouts by using shaded regions. Shaded regions allow you to set a background color or a background image to a contiguous group of rows within a layout. The shaded region can also be given a legend. To set...","og_url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/","og_site_name":"Product Documentation","article_modified_time":"2025-02-13T02:11:57+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/","url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/","name":"Adding Shaded Regions to Layouts - Product Documentation","isPartOf":{"@id":"https:\/\/docs.extraview.com\/v25\/#website"},"datePublished":"2024-02-15T22:53:34+00:00","dateModified":"2025-02-13T02:11:57+00:00","breadcrumb":{"@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/adding-shaded-regions-layouts-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":2,"name":"ExtraView 25","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":3,"name":"Administration Guide","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/"},{"@type":"ListItem","position":4,"name":"Site Configuration Menu","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/"},{"@type":"ListItem","position":5,"name":"Design Center","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/"},{"@type":"ListItem","position":6,"name":"Relationship Layouts","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/relationship-layouts-1\/"},{"@type":"ListItem","position":7,"name":"Adding Shaded Regions to Layouts"}]},{"@type":"WebSite","@id":"https:\/\/docs.extraview.com\/v25\/#website","url":"https:\/\/docs.extraview.com\/v25\/","name":"ExtraView Product Documentation","description":"ExtraView Documentation","publisher":{"@id":"https:\/\/docs.extraview.com\/v25\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/docs.extraview.com\/v25\/#organization","name":"ExtraView Corporation","url":"https:\/\/docs.extraview.com\/v25\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/","url":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","contentUrl":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","width":512,"height":512,"caption":"ExtraView Corporation"},"image":{"@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"carl.koppel","author_link":"https:\/\/docs.extraview.com\/v25\/author\/carl-koppel\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/comments?post=23965"}],"version-history":[{"count":0,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23965\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23950"}],"wp:attachment":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/media?parent=23965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}