Changes for page Login/Lookup Page Builder

Last modified by Admin on 2021/02/10 15:16
From version 2.1
edited by Admin
on 2020/10/09 14:21
Change comment: There is no comment for this version
To version 3.1
edited by Admin
on 2020/10/09 14:22
Change comment: There is no comment for this version

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -Login/Lookup Page Builder
1 +New_login_lookup_form
Content
... ... @@ -1,0 +1,161 @@
1 +**NEW LOGIN/LOOKUP FORM:**\\
2 +
3 +* (% style="color: rgb(23,43,77);" %)**Select INVENTORY from the main menu.**
4 +* (% style="color: rgb(23,43,77);" %)**Select "Login/Lookup" from the sub-menu.**
5 +
6 +
7 +[[image:attach:worddav1e930f057d5c70c741ca8fc18873b37b.png||width="624" height="337"]]\\
8 +
9 +* This will open the window as shown below.
10 +
11 +
12 +[[image:attach:worddav5654ed57bcda006cc2909eab2d444fb0.png||width="624" height="170"]]
13 +\\
14 +
15 +* Click on Create Login/Lookup Form button shown in above screenshot, then you will be redirected to Definition tab as shown in below screenshot.
16 +
17 +
18 +[[image:attach:worddav34131b3e87dd92977dbcb2fb9ffe2a27.png||width="624" height="352"]]
19 +In the form in this tab you will have to fill the following:\\
20 +
21 +1. **Title:** This is the title that will be used to view form in the list.
22 +1. **Brand**: This is select type where you will be shown the options of BRAND that you have created in the Brand section. Header and footer for the login form will be displayed using this BRAND.
23 +1. **Description**: This is description for form.
24 +1. **Activate**: DONOT ON THIS BUTTON TO YES NOW. WE HAVE TO DO IT AFTER WE PREVIEW THE FORM. Instructions to activate form will be mentioned in this documentation later on.
25 +
26 +
27 +\\
28 +
29 +* **After filling the details in this form then click on the lookup form tab shown in the below screenshot.**
30 +
31 +
32 +[[image:attach:worddav39fd1b8e15733980f67be04e85e320bd.png||width="624" height="362"]]
33 +
34 +* Once you click on the tab then you will be redirected to the lookup form. In this you will be having few sections to fill it starts with demographics.
35 +
36 +
37 +[[image:attach:worddav5dbf9c900cd83a092cbdfcb3d884f395.png||width="624" height="358"]]\\
38 +
39 +* As show in above screenshot you can select the questions from the demographics that you have created in the demographics section.
40 +
41 +\\
42 +
43 +* You can use Add button shown in above screenshot to add more number of demos. As shown in below screenshot you can select the questions of any type.
44 +
45 +
46 +[[image:attach:worddavf0f130747a27aa8bea47c910f0e0d4f5.png||width="624" height="359"]]\\
47 +
48 +* Once you select the questions for lookup form next section is configurations that you will see if you scroll down in the same form.
49 +* Now in the section marked in the below picture you will have to fill the lookup form configs like
50 +
51 +
52 +[[image:attach:worddav5f821c020c97bfbe9a260adb5f732700.png||width="624" height="357"]]\\
53 +
54 +1. (% style="color: rgb(51,51,51);" %)**Look Up Form Title:**(%%) This will be used as the title on the lookup tab.
55 +1. (% style="color: rgb(51,51,51);" %)**Multiple User Found While Lookup Text:** We will be displaying this text as error when multiple users are found in lookup
56 +1. (% style="color: rgb(51,51,51);" %)**User Not Found While Lookup Text:** We will be displaying this text as error when user is not found in lookup.
57 +1. (% style="color: rgb(51,51,51);" %)**Contact Admin Text for Lookup:** This we used to display when you want to display contact admin msg.
58 +1. (% style="color: rgb(51,51,51);" %)**Text for lookup button:** This text will be used as label for lookup button.
59 +1. (% style="color: rgb(51,51,51);" %)**Text for register button on lookup Form:** This text will be used as register button label.
60 +
61 +
62 +\\
63 +
64 +* Once you select the config for lookup form next section is the Form color section that you will see if you scroll down the form further.
65 +
66 +[[image:attach:worddav8026acab7cd34db2329ca88e3f7d04b3.png||width="624" height="355"]]\\
67 +
68 +* Now in the section marked in above screenshot you will have to select the colors for the following. (* THESE COLORS ARE APPLIED TO BOTH LOGIN AND LOOKUP FORMS).
69 +
70 +\\
71 +
72 +1. (% style="color: rgb(51,51,51);" %)**Background color for the lookup-login template**(%%): This color will be applied to whole template as shown in below picture.
73 +1. (% style="color: rgb(51,51,51);" %)**Text color for the lookup-login template:** This color will be applied to all the text on the login and lookup forms as shown in below forms.
74 +1. (% style="color: rgb(51,51,51);" %)**Error text color:** This color will be applied to all the errors that will be displayed as shown in below screenshot.
75 +
76 +[[image:attach:worddav20a3b7d8f44bce363d8a1c6810deffd1.png||width="322" height="498"]]\\
77 +
78 +* In above picture black is background color, text color is white and error text.
79 +
80 +[[image:attach:worddavdc1c5b8fbbd861db6629cc02773315e0.png||width="351" height="524"]]
81 +
82 +* In above screenshot 1 is the lookup form title and 2 is the lookup button and "LOOK UP" is text on the button that we have filled in the form and as you can see black is applied to background and white to text those are colors which we did choose for this example.
83 +* Register button will appear on failed lookup.
84 +
85 +\\
86 +
87 +* Once color section is done and we further scroll down then we will see the redirect form section.
88 +* We will have 2 select question here success redirect and failed redirect.
89 +
90 +
91 +Success redirect has 3 options:
92 +
93 +1. **FORM:** If you select FORM, you will be asked to select the form from the list of forms that you have created using embedded forms or form builder and on successful lookup you will be redirected to that form.
94 +
95 +[[image:attach:worddav080d32522fbd80e775856bc5a9010b7f.png||width="624" height="174"]]
96 +\\
97 +
98 +1. **URL:** If you select URL you will be asked to enter URL as show below and on successful lookup you will be redirected to that URL.
99 +
100 +[[image:attach:worddavd1a5322ea866368b32a48bb80a870ae9.png||width="624" height="118"]]
101 +\\
102 +
103 +1. **BACK:** If you select BACK on successful lookup it will return back to the previous page.
104 +
105 +\\
106 +
107 +* Now you have to select the failed redirect options. You have 4 option:
108 +
109 +1. **FORM:** If you select FORM, you will be asked to select the form from the list of forms that you have created using embedded forms or form builder and on failed lookup you will be redirected to that form when you click on register button.
110 +1. **URL**: If you select URL you will be asked to enter URL as show below and on failed lookup you will be redirected to that URL when you press register button
111 +1. **BACK:** If you select BACK, on failed lookup it will return back to the previous page.
112 +1. **No** **Action:** It will just show error, you will not see register button on failed lookup if you select No Action
113 +
114 +
115 +\\
116 +
117 +* **After filling the details in this form then click on the login form tab shown in the below screenshot.**
118 +
119 +[[image:attach:worddav37931564c6a43cd5a20d599e4837b771.png||width="624" height="186"]]
120 +\\
121 +
122 +* Once you click on the tab then you will be redirected to the login form. In this you will be having few sections to fill it starts with demographics.
123 +* You will be asked to create demos from email, username and password as shown below.
124 +
125 +[[image:attach:worddav12b826597b5662c22c4012b83b152004.png||width="624" height="298"]]\\
126 +
127 +* First select username or email as first demo then select password as second demo.
128 +* Now in the section marked in the below picture you will have to fill the login form configs like
129 +*1. (% style="color: rgb(51,51,51);" %)**Login Form Title:**(%%) (% style="color: rgb(51,51,51);" %)This will be used as title on the login form tab.
130 +*1. (% style="color: rgb(51,51,51);" %)**Text for login button:**(%%) (% style="color: rgb(51,51,51);" %)This text is used for the label of login button.
131 +*1. (% style="color: rgb(51,51,51);" %)**Text for register button on login Form:**(%%) (% style="color: rgb(51,51,51);" %)This text is used for the label of Register button.
132 +
133 +
134 +[[image:attach:worddav9e86e9bc0351d92c229e9dfa31742e7d.png||width="624" height="230"]]
135 +\\
136 +
137 +* Now same as in lookup form you will be asked to select Success redirect and failed redirect.
138 +* Next section of login form is social login as shown in below screenshot if you want to use particular social login you can click button to YES which is beside that particular social login provider as shown in below screenshot.
139 +
140 +[[image:attach:worddav9f08afa35b7d1f762e2ff4d5ef2956bc.png||width="624" height="154"]]
141 +
142 +* If you see the error text as shown in below screenshot then you have to create IDENTIFIER in demos, you can do it after saving this form.
143 +
144 +[[image:attach:worddavc2809177c60d05434986b2c5d1874f51.png||width="624" height="158"]]\\
145 +
146 +* Only social login providers you select will be shown on the form.
147 +
148 +
149 +[[image:attach:worddav1f80fab955d162d9d90135eba0f14e9b.png||width="375" height="505"]]\\
150 +
151 +* As shown in above screenshot 1 is login Form title, 3 is selected demo questions set, 2 is login button and text and 4 is social login provider icons.
152 +* Register button will appear on failed login
153 +* Once you fill all the forms then hit save button and you will be redirected to below window shown in below screenshot then click eye icon shown in below screenshot to preview the form.
154 +
155 +
156 +[[image:attach:worddavdf57afdfe6970100751f6237975a5741.png||width="624" height="129"]]
157 +
158 +* If you click the preview button you will be redirected to login form where you can preview and test its functionality.
159 +* If everything is as expected and want this new form as default login form, then click edit button on the screen shown in above screenshot this will take you to window shown in below screenshot then ON the Activate Button to YES as shown in below Screenshot. This will make your form as default login/lookup form.
160 +
161 +[[image:attach:worddav7d0dc18aff734461856274f66c5e92b6.png||width="624" height="199"]]\\
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -36667479
1 +36667480
url
... ... @@ -1,1 +1,1 @@
1 -https://info.onecount.net//wiki/spaces/OD/pages/36667479/Login/Lookup Page Builder
1 +https://info.onecount.net//wiki/spaces/OD/pages/36667480/New_login_lookup_form