{"id":23967,"date":"2024-02-15T14:53:34","date_gmt":"2024-02-15T22:53:34","guid":{"rendered":"https:\/\/docs.extraview.com\/v25\/book\/adding-paged-layouts-1\/"},"modified":"2025-02-25T13:54:27","modified_gmt":"2025-02-25T21:54:27","slug":"adding-paged-layouts-1","status":"publish","type":"page","link":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-paged-layouts-1\/","title":{"rendered":"Adding Paged Layouts"},"content":{"rendered":"<p>Paged layouts are ideal when you have a very large number of fields on a layout and wish to separate them into logical groups which the user can page forward and back through, using forward and backwards buttons.\u00a0 Compare this to the use by users, of <a href=\"v25\/adding-accordion-folds-layouts-1\">accordion folds<\/a> that open and close individual sections of the screen.\u00a0 Paged layouts are also ideal to use on mobile device layouts where there is only room on a device to display a handful of fields at a time, before the user has to scroll up and down.<\/p>\n<p><img decoding=\"async\" style=\"width: 15%;\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/page-mobile.png\" alt=\"\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0<img decoding=\"async\" style=\"width: 70%;\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/page-desktop.png\" alt=\"\" \/><br \/>\n<cite>Page layouts on mobile and desktop clients<\/cite><\/p>\n<p>Paged layouts have several important criteria associated with their use:<\/p>\n<ul>\n<li>Only one page within a sequence\u00a0may be visible at any one time.\u00a0 This is termed the <strong>active page<\/strong>.<\/li>\n<li>Each page is defined with two fields, one beginning with the characters\u00a0PAGE_PRE_ and one beginning with the characters PAGE_POST_.\u00a0 For example, fields defining a page might be named PAGE_PRE_ORDER_INFO and PAGE_POST_ORDER_INFO.\u00a0 An obvious point is that each <em>add<\/em> or <em>edit<\/em> layout that contains pages, should have at least two pages defined.\u00a0 The two fields surround all the fields or embedded layouts that compose each page<\/li>\n<li>Each page within the sequence\u00a0may optionally have a title.\u00a0 This is defined within the field&#8217;s data dictionary entry within the Help Text.\u00a0 If no title is defined, pages will be titled <strong>Page 1<\/strong>, <strong>Page 2<\/strong>, etc. The title is displayed at the top of the page within the layout<\/li>\n<li>The PAGE_PRE_ and the PAGE_POST_ fields must extend the complete width of the layout that uses them<\/li>\n<li>Each page may contain any number of fields or may contain an embedded layout.\u00a0Note that you might have some fields before or after the last page you have\u00a0defined.\u00a0 If you configure the layout in\u00a0this way, then the fields before the first PAGE_PRE_ and after the last PAGE_POST_ fields will always be visible to the end user<\/li>\n<li>A complete page, within a sequence of pages, may have a <em>visible if<\/em> layout cell attribute associated with it, allowing the page to be skipped upon data entry, dependent on the values controlling the <em>visible if<\/em> attribute\u00a0chosen by the end user<\/li>\n<li>The order of the pages defined within the <em>add<\/em> or <em>edit<\/em> layout is significant.\u00a0 The order defines the sequence with which the pages will be presented to the end user<\/li>\n<li>When an <em>add <\/em>or <em>edit <\/em>screen is first opened by an end user, the first visible page is opened.\u00a0 All other pages will be closed.\u00a0 A visible page is one where at least a single field is visible &#8211; fields are subject to the usual constraints such as security permissions<\/li>\n<li>Care should be taken when using allowed value type relationships, to ensure the parent field is set on the same page, or a prior page to the child field.\u00a0 It would be difficult for the end user to navigate back up the pages to enter a child value in a field<\/li>\n<li>If the current page which a user is viewing becomes invisible, due to workflow constraints, the first, visible previous page becomes the active page and is made visible<\/li>\n<li>Care should also be taken with required fields within pages.\u00a0 These fields will still be required when the user submits the issue, even if they are not on the current active page<\/li>\n<li>Nested pages are not supported.\u00a0 This implies that each PAGE_PRE_ field must be followed by its corresponding\u00a0PAGE_POST_ field, before another PAGE_PRE_ field is encountered<\/li>\n<li>You cannot create pages within &#8220;Selected By&#8221; layouts.\u00a0 This is not a supported configuration<\/li>\n<li>You cannot create pages nested within accordion folds. This is not a supported configuration<\/li>\n<li>You cannot create pages nested within shaded regions. This is not a supported configuration<\/li>\n<li>You can style the pages with the use of layout cell attributes on the PAGE_PRE_ field within the layout.\u00a0 The potential layout cell attributes are implemented as HTML Modifier attributes, that begin with the following characters and end with the appropriate value:<br \/>\n<table style=\"width: 100%;\" border=\"0\" cellspacing=\"2\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td style=\"vertical-align: top;\">BGCOLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">The background color of the header and footer rows.\u00a0 The default color is the value of the behavior setting named BG_ALT_COLOR.\u00a0 Any valid HTML color name or hex value in the form #123456 may be used<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">BORDER_COLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">The color of the border around the paged layout.\u00a0 The default value is #A3A9B0<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">COLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">The color of the text of the title in the header of the page.\u00a0 The default color is the value of the behavior setting named LABEL_COLOR<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">HIGHLIGHT_BGCOLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">The background\u00a0color of the text of the title in the header of the page, when the user places their mouse over the page title.\u00a0 The default color is #666666<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">HIGHLIGHT_COLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">The color of the text of the title in the header of the page, when the user places their mouse over the page title.\u00a0 The default color is the value of the behavior setting named TAB_FONT_ON_COLOR<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">PAGE_BACK_IMG:<em>image-name<\/em><\/td>\n<td style=\"vertical-align: top;\">The default image is named left<em>-arrow.png <\/em>and is a standard image within the <em>images<\/em> folder that your installation is using &#8211; the path in the IMG_HOME directory specifies where the image is stored.\u00a0 You may place any image in the value to the layout cell attribute, but you should use the full path to the image, wherever it is stored.<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">PAGE_FWD_IMG:<em>image-name<\/em><\/td>\n<td style=\"vertical-align: top;\">The default image is named <em>rt-arrow.png <\/em>and is a standard image within the <em>images<\/em> folder that your installation is using &#8211; the path in the IMG_HOME directory specifies where the image is stored.\u00a0 You may place any image in the value to the layout cell attribute, but you should use the full path to the image, wherever it is stored.<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">PAGE_HEIGHT:<em>nn<\/em><\/td>\n<td style=\"vertical-align: top;\">Layouts within ExtraView are typically auto-sized.\u00a0 This attribute will size the page height to the number of pixels in the value of the attribute.\u00a0 The greatest use of this attribute is to use the same value on each PAGE_PRE_ field you define in the layout, thereby ensuring all pages are rendered at exactly the same height, giving a pleasing effect for the end user.If the value you provide is less than the height required by the fields within the page, the page will render to the height required by the fields.<\/p>\n<p><strong>Tip: <\/strong>Apply the layout cell attribute to the tallest page within your layout first, to make sure you have a suitable value.\u00a0 Then apply the same value to all the other pages in the layout.<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">PAGE_WIDTH:<em>nn<\/em><\/td>\n<td style=\"vertical-align: top;\">Layouts within ExtraView are typically auto-sized.\u00a0 This attribute will size the page width\u00a0to the number of pixels in the value of the attribute.\u00a0 The greatest use of this attribute is to use the same value on each PAGE_PRE_ field you define in the layout, thereby ensuring all pages are rendered at exactly the same width, giving a pleasing effect for the end user.If the value you provide is less than the width required by the fields within the page, the page will render to the width required by the fields.<\/p>\n<p><strong>Tip: <\/strong>Apply the layout cell attribute to the widest page within your layout first, to make sure you have a suitable value.\u00a0 Then apply the same value to all the other pages in the layout.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ul>\n<h3>Configuring Individual Pages with &#8220;VISIBLE IF&#8221;<\/h3>\n<p>It is possible to configure individual pages to be conditionally visible, based on the value of a field within your layout.\u00a0 To accomplish this all the fields that are to be hidden should be placed within an embedded layout, and this layout should be placed between the PAGE_PRE_xxx and the PAGE_POST_xxx fields on the layout.\u00a0 Then you may apply a VISIBLE IF layout cell attribute to this layout as shown below.<\/p>\n<p><img decoding=\"async\" style=\"width: 80%;\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/page-visible-if.png\" alt=\"\" \/><\/p>\n<h3>Paged Layouts &amp; Accordion Folds<\/h3>\n<p>It is not recommended to nest Accordion Fold fields within Paged layouts, or vice versa.\u00a0This does not provide a very usable user interface, and you might encounter some unexpected behavior.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Paged layouts are ideal when you have a very large number of fields on a layout and wish to separate them into logical groups which the user can page forward and back through, using forward and backwards buttons.\u00a0 Compare this to the use by users, of accordion folds that open and close individual sections of&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":23935,"menu_order":16,"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-23967","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 Paged 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\/adding-paged-layouts-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Paged Layouts - Product Documentation\" \/>\n<meta property=\"og:description\" content=\"Paged layouts are ideal when you have a very large number of fields on a layout and wish to separate them into logical groups which the user can page forward and back through, using forward and backwards buttons.\u00a0 Compare this to the use by users, of accordion folds that open and close individual sections of...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-paged-layouts-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Product Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-25T21:54:27+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=\"7 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\/adding-paged-layouts-1\/\",\"url\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-paged-layouts-1\/\",\"name\":\"Adding Paged Layouts - Product Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\"},\"datePublished\":\"2024-02-15T22:53:34+00:00\",\"dateModified\":\"2025-02-25T21:54:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-paged-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\/adding-paged-layouts-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-paged-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\":\"Adding Paged 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 Paged 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\/adding-paged-layouts-1\/","og_locale":"en_US","og_type":"article","og_title":"Adding Paged Layouts - Product Documentation","og_description":"Paged layouts are ideal when you have a very large number of fields on a layout and wish to separate them into logical groups which the user can page forward and back through, using forward and backwards buttons.\u00a0 Compare this to the use by users, of accordion folds that open and close individual sections of...","og_url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-paged-layouts-1\/","og_site_name":"Product Documentation","article_modified_time":"2025-02-25T21:54:27+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 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\/adding-paged-layouts-1\/","url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-paged-layouts-1\/","name":"Adding Paged Layouts - Product Documentation","isPartOf":{"@id":"https:\/\/docs.extraview.com\/v25\/#website"},"datePublished":"2024-02-15T22:53:34+00:00","dateModified":"2025-02-25T21:54:27+00:00","breadcrumb":{"@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-paged-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\/adding-paged-layouts-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-paged-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":"Adding Paged 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\/23967","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=23967"}],"version-history":[{"count":0,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23967\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23935"}],"wp:attachment":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/media?parent=23967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}