{"id":1079,"date":"2014-12-19T10:48:22","date_gmt":"2014-12-19T15:48:22","guid":{"rendered":"http:\/\/xlinesoft.com\/blog\/?p=1079"},"modified":"2015-03-20T12:02:41","modified_gmt":"2015-03-20T17:02:41","slug":"how-to-split-addedit-pages-into-several-subpages","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2014\/12\/19\/how-to-split-addedit-pages-into-several-subpages\/","title":{"rendered":"How to split Add\/Edit pages into several subpages"},"content":{"rendered":"<p>Fairly often we want to split long forms into several steps letting users fill a few fields on each step. Besides making a long form easier to fill out for your users you can also save partial results between pages.<\/p>\n<p>Here is how this can be done in PHPRunner, ASPRunnerPro and ASPRunner.NET. <\/p>\n<p>Lets assume we have Cars table with about 20 fields and we want to split Add\/Edit pages into three steps. <\/p>\n<h3>1. Create two custom views<\/h3>\n<p>Create two custom views (Cars1 and Cars2) based on Cars table<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr1.png\" alt=\"\" title=\"scr1\" width=\"750\" height=\"550\" class=\"alignnone size-full wp-image-1082\" \/><br \/>\n<!--more--><\/p>\n<h3>2. Setup pages and fields<\/h3>\n<p>Cars1 and Cars2 views will only need Add and Edit pages enabled. Proceed to &#8216;Choose Fields&#8217; screen of Cars table and only leave first 6 fields to appear on both Add and Edit pages.<\/p>\n<p>Switch to Cars1 view and only leave fields 7-13 on Add\/Edit pages.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr21.png\" alt=\"\" title=\"scr2\" width=\"801\" height=\"574\" class=\"alignnone size-full wp-image-1090\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr21.png 801w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr21-300x214.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr21-150x107.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr21-400x286.png 400w\" sizes=\"auto, (max-width: 801px) 100vw, 801px\" \/><\/p>\n<p>Cars2 view will only need to have the rest of fields enabled on Add\/Edit pages.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr3.png\" alt=\"\" title=\"scr3\" width=\"792\" height=\"574\" class=\"alignnone size-full wp-image-1096\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr3.png 792w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr3-300x217.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr3-150x108.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/scr3-400x289.png 400w\" sizes=\"auto, (max-width: 792px) 100vw, 792px\" \/><\/p>\n<h3>3. Setup events<\/h3>\n<p>Cars table, AfterRecordAdded event. In this event we need to redirect user to the Edit page of Cars1 view. The same code needs to be added to AfterRecordUpdated event. When you paste this code to your project make sure to use correct table\/view name and key column name (ID in this example). <\/p>\n<p>PHPRunner<\/p>\n<pre name=\"code\" class=\"php:nocontrols\">header(\"Location: cars1_edit.php?editid1=\".$keys[\"ID\"]);\r\nexit();<\/pre>\n<p>ASPRunnerPro<\/p>\n<pre name=\"code\" class=\"vb:nocontrols\">\r\nResponse.Redirect \"cars1_edit.asp?editid1=\"&keys(\"ID\")\r\n<\/pre>\n<p>ASPRunner.NET<\/p>\n<pre name=\"code\" class=\"csharp:nocontrols\">\r\nMVCFunctions.HeaderRedirect(\"Cars1\", \"edit?editid1=\" + String.Format(\"{0}\",keys[\"ID\"]));\r\n<\/pre>\n<p><strong>Cars1, AfterRecordUpdated event<\/strong><\/p>\n<p>In this event we redirect user to Cars2 view Edit page.<\/p>\n<p>PHPRunner<\/p>\n<pre name=\"code\" class=\"php:nocontrols\">header(\"Location: cars2_edit.php?editid1=\".$keys[\"ID\"]);\r\nexit();<\/pre>\n<p>ASPRunnerPro<\/p>\n<pre name=\"code\" class=\"vb:nocontrols\">\r\nResponse.Redirect \"cars2_edit.asp?editid1=\"&keys(\"ID\")\r\n<\/pre>\n<p>ASPRunner.NET<\/p>\n<pre name=\"code\" class=\"csharp:nocontrols\">\r\nMVCFunctions.HeaderRedirect(\"Cars2\", \"edit?editid1=\" + String.Format(\"{0}\",keys[\"ID\"]));\r\n<\/pre>\n<p><strong>Cars2, AfterRecordUpdated event<\/strong><\/p>\n<p>Now we just redirect user back to the List page of Cars table. This is pretty much it. <\/p>\n<p>PHPRunner <\/p>\n<pre name=\"code\" class=\"php:nocontrols\">header(\"Location: cars_list.php?a=return\");\r\nexit();<\/pre>\n<p>ASPRunnerPro<\/p>\n<pre name=\"code\" class=\"vb:nocontrols\">\r\nResponse.Redirect \"cars_list.asp?a=return\"\r\n<\/pre>\n<p>ASPRunner.NET<\/p>\n<pre name=\"code\" class=\"csharp:nocontrols\">\r\nMVCFunctions.HeaderRedirect(\"Cars\", \"list?a=return\");\r\n<\/pre>\n<p>This is how it looks in action.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/cars_split_page.gif\" alt=\"\" title=\"cars_split_page\" width=\"815\" height=\"624\" class=\"alignnone size-full wp-image-1080\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/cars_split_page.gif 815w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/cars_split_page-300x229.gif 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/cars_split_page-150x114.gif 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/12\/cars_split_page-400x306.gif 400w\" sizes=\"auto, (max-width: 815px) 100vw, 815px\" \/><\/p>\n<p><strong>Notes<\/strong> <\/p>\n<p>1. If there are some fields that are setup as NOT NULL in the database it makes sense to put those fields to the first Add screen so record can be added.<\/p>\n<p>2. This approach will only work with regular Add\/Edit pages. It won&#8217;t work when Add\/Edit pages are in popup mode<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fairly often we want to split long forms into several steps letting users fill a few fields on each step. Besides making a long form easier to fill out for your users you can also save partial results between pages. Here is how this can be done in PHPRunner, ASPRunnerPro and ASPRunner.NET. Lets assume we have Cars table with about 20 fields and we want to split Add\/Edit pages into three steps. 1. Create two custom views Create two custom views (Cars1 and Cars2) based&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2014\/12\/19\/how-to-split-addedit-pages-into-several-subpages\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;How to split Add\/Edit pages into several subpages&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,4,3,8],"tags":[],"class_list":["post-1079","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-php-category","category-php-code-generator","category-php-form-generator","category-tutorials"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1079"}],"version-history":[{"count":14,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1079\/revisions"}],"predecessor-version":[{"id":1088,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1079\/revisions\/1088"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}