{"id":22153,"date":"2024-02-15T14:48:40","date_gmt":"2024-02-15T22:48:40","guid":{"rendered":"https:\/\/docs.extraview.com\/v22\/book\/adding-paged-layouts\/"},"modified":"2024-02-15T14:48:40","modified_gmt":"2024-02-15T22:48:40","slug":"adding-paged-layouts","status":"publish","type":"page","link":"https:\/\/docs.extraview.com\/v22\/adding-paged-layouts\/","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.&nbsp; Compare this to the use by users, of <a href=\"adding-accordion-folds\">accordion folds<\/a> that open and close individual sections of the screen.&nbsp; 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\" alt=\"\" src=\"\/extraview-media\/images\/ag\/fields_and_layouts\/page-mobile.png\" style=\"width: 15%;\" \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<img decoding=\"async\" alt=\"\" src=\"\/extraview-media\/images\/ag\/fields_and_layouts\/page-desktop.png\" style=\"width: 70%;\" \/><br \/>\n\t<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>\n\t\tOnly one page within a sequence&nbsp;may be visible at any one time.&nbsp; This is termed the <strong>active page<\/strong>.<\/li>\n<li>\n\t\tEach page is defined with two fields, one beginning with the characters&nbsp;PAGE_PRE_ and one beginning with the characters PAGE_POST_.&nbsp; For example, fields defining a page might be named PAGE_PRE_ORDER_INFO and PAGE_POST_ORDER_INFO.&nbsp; An obvious point is that each <em>add<\/em> or <em>edit<\/em> layout that contains pages, should have at least two pages defined.&nbsp; The two fields surround all the fields or embedded layouts that compose each page<\/li>\n<li>\n\t\tEach page within the sequence&nbsp;may optionally have a title.&nbsp; This is defined within the field&#8217;s data dictionary entry within the Help Text.&nbsp; 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>\n\t\tThe PAGE_PRE_ and the PAGE_POST_ fields must extend the complete width of the layout that uses them<\/li>\n<li>\n\t\tEach page may contain any number of fields or may contain an embedded layout.&nbsp;Note that you might have some fields before or after the last page you have&nbsp;defined.&nbsp; If you configure the layout in&nbsp;this 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>\n\t\tA 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&nbsp;chosen by the end user<\/li>\n<li>\n\t\tThe order of the pages defined within the <em>add<\/em> or <em>edit<\/em> layout is significant.&nbsp; The order defines the sequence with which the pages will be presented to the end user<\/li>\n<li>\n\t\tWhen an <em>add <\/em>or <em>edit <\/em>screen is first opened by an end user, the first visible page is opened.&nbsp; All other pages will be closed.&nbsp; 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>\n\t\tCare 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.&nbsp; 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>\n\t\tIf 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>\n\t\tCare should also be taken with required fields within pages.&nbsp; 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>\n\t\tNested pages are not supported.&nbsp; This implies that each PAGE_PRE_ field must be followed by its corresponding&nbsp;PAGE_POST_ field, before another PAGE_PRE_ field is encountered<\/li>\n<li>\n\t\tYou cannot create pages within &#8220;Selected By&#8221; layouts.&nbsp; This is not a supported configuration<\/li>\n<li>\n\t\tYou cannot create pages nested within accordion folds. This is not a supported configuration<\/li>\n<li>\n\t\tYou cannot create pages nested within shaded regions. This is not a supported configuration<\/li>\n<li>\n\t\tYou can style the pages with the use of layout cell attributes on the PAGE_PRE_ field within the layout.&nbsp; 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\t\t&nbsp;<\/p>\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\t\t\tBGCOLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tThe background color of the header and footer rows.&nbsp; The default color is the value of the behavior setting named BG_ALT_COLOR.&nbsp; 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;\">\n\t\t\t\t\t\tBORDER_COLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tThe color of the border around the paged layout.&nbsp; The default value is #A3A9B0<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tCOLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tThe color of the text of the title in the header of the page.&nbsp; The default color is the value of the behavior setting named LABEL_COLOR<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tHIGHLIGHT_BGCOLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tThe background&nbsp;color of the text of the title in the header of the page, when the user places their mouse over the page title.&nbsp; The default color is #666666<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tHIGHLIGHT_COLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tThe color of the text of the title in the header of the page, when the user places their mouse over the page title.&nbsp; 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;\">\n\t\t\t\t\t\tPAGE_BACK_IMG:<em>image-name<\/em><\/td>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tThe 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.&nbsp; 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;\">\n\t\t\t\t\t\tPAGE_FWD_IMG:<em>image-name<\/em><\/td>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tThe 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.&nbsp; 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;\">\n\t\t\t\t\t\tPAGE_HEIGHT:<em>nn<\/em><\/td>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tLayouts within ExtraView are typically auto-sized.&nbsp; This attribute will size the page height to the number of pixels in the value of the attribute.&nbsp; 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.<\/p>\n<p>\t\t\t\t\t\tIf 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>\t\t\t\t\t\t<strong>Tip: <\/strong>Apply the layout cell attribute to the tallest page within your layout first, to make sure you have a suitable value.&nbsp; Then apply the same value to all the other pages in the layout.<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tPAGE_WIDTH:<em>nn<\/em><\/td>\n<td style=\"vertical-align: top;\">\n\t\t\t\t\t\tLayouts within ExtraView are typically auto-sized.&nbsp; This attribute will size the page width&nbsp;to the number of pixels in the value of the attribute.&nbsp; 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.<\/p>\n<p>\t\t\t\t\t\tIf 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>\t\t\t\t\t\t<strong>Tip: <\/strong>Apply the layout cell attribute to the widest page within your layout first, to make sure you have a suitable value.&nbsp; 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>\n\tConfiguring 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.&nbsp; 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.&nbsp; Then you may apply a VISIBLE IF layout cell attribute to this layout as shown below.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"\/extraview-media\/images\/ag\/fields_and_layouts\/page-visible-if.png\" style=\"width: 80%;\" \/><\/p>\n<h3>\n\tPaged Layouts &amp; Accordion Folds<\/h3>\n<p>It is not recommended to nest Accordion Fold fields within Paged layouts, or vice versa.&nbsp;This 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.&nbsp; 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":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"","_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-22153","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\/v22\/adding-paged-layouts\/\" \/>\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.&nbsp; 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\/v22\/adding-paged-layouts\/\" \/>\n<meta property=\"og:site_name\" content=\"Product Documentation\" \/>\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\/v22\/adding-paged-layouts\/\",\"url\":\"https:\/\/docs.extraview.com\/v22\/adding-paged-layouts\/\",\"name\":\"Adding Paged Layouts - Product Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.extraview.com\/v22\/#website\"},\"datePublished\":\"2024-02-15T22:48:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.extraview.com\/v22\/adding-paged-layouts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.extraview.com\/v22\/adding-paged-layouts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.extraview.com\/v22\/adding-paged-layouts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.extraview.com\/v22\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Paged Layouts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.extraview.com\/v22\/#website\",\"url\":\"https:\/\/docs.extraview.com\/v22\/\",\"name\":\"ExtraView Product Documentation\",\"description\":\"ExtraView Documentation\",\"publisher\":{\"@id\":\"https:\/\/docs.extraview.com\/v22\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.extraview.com\/v22\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/docs.extraview.com\/v22\/#organization\",\"name\":\"ExtraView Corporation\",\"url\":\"https:\/\/docs.extraview.com\/v22\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.extraview.com\/v22\/#\/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\/v22\/#\/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\/v22\/adding-paged-layouts\/","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.&nbsp; Compare this to the use by users, of accordion folds that open and close individual sections of...","og_url":"https:\/\/docs.extraview.com\/v22\/adding-paged-layouts\/","og_site_name":"Product Documentation","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\/v22\/adding-paged-layouts\/","url":"https:\/\/docs.extraview.com\/v22\/adding-paged-layouts\/","name":"Adding Paged Layouts - Product Documentation","isPartOf":{"@id":"https:\/\/docs.extraview.com\/v22\/#website"},"datePublished":"2024-02-15T22:48:40+00:00","breadcrumb":{"@id":"https:\/\/docs.extraview.com\/v22\/adding-paged-layouts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.extraview.com\/v22\/adding-paged-layouts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.extraview.com\/v22\/adding-paged-layouts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.extraview.com\/v22\/"},{"@type":"ListItem","position":2,"name":"Adding Paged Layouts"}]},{"@type":"WebSite","@id":"https:\/\/docs.extraview.com\/v22\/#website","url":"https:\/\/docs.extraview.com\/v22\/","name":"ExtraView Product Documentation","description":"ExtraView Documentation","publisher":{"@id":"https:\/\/docs.extraview.com\/v22\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.extraview.com\/v22\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/docs.extraview.com\/v22\/#organization","name":"ExtraView Corporation","url":"https:\/\/docs.extraview.com\/v22\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.extraview.com\/v22\/#\/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\/v22\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"carl.koppel","author_link":"https:\/\/docs.extraview.com\/v22\/author\/carl-koppel\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/docs.extraview.com\/v22\/wp-json\/wp\/v2\/pages\/22153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.extraview.com\/v22\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.extraview.com\/v22\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v22\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v22\/wp-json\/wp\/v2\/comments?post=22153"}],"version-history":[{"count":0,"href":"https:\/\/docs.extraview.com\/v22\/wp-json\/wp\/v2\/pages\/22153\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.extraview.com\/v22\/wp-json\/wp\/v2\/media?parent=22153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}