Wiki source code of Nested: Livetable
Last modified by Vincent Massol on 2024/02/26 17:53
Show last authors
author | version | line-number | content |
---|---|---|---|
1 | (% class="row" %) | ||
2 | ((( | ||
3 | (% class="col-xs-12" %) | ||
4 | ((( | ||
5 | == Before == | ||
6 | ))) | ||
7 | (% class="col-xs-6" %) | ||
8 | ((( | ||
9 | [[{{image reference="before.png" width="100%"/}}>>attach:before.png]] | ||
10 | ))) | ||
11 | (% class="col-xs-6" %) | ||
12 | ((( | ||
13 | **Purpose**: Find a solution to display Nested Documents in Livetables | ||
14 | ))) | ||
15 | ))) | ||
16 | |||
17 | (% class="row" %) | ||
18 | ((( | ||
19 | (% class="col-xs-12" %) | ||
20 | ((( | ||
21 | == Usage == | ||
22 | ))) | ||
23 | (% class="col-xs-6" %) | ||
24 | ((( | ||
25 | [[{{image reference="Usages.png" width="100%"/}}>>attach:Usages.png]] | ||
26 | ))) | ||
27 | (% class="col-xs-6" %) | ||
28 | ((( | ||
29 | **Examples**: | ||
30 | 1. Document Index + Space Index (Page / Space) | ||
31 | 1. Watchlist (Wiki / Space / Page) | ||
32 | 1. Totem App (Reference) | ||
33 | ))) | ||
34 | ))) | ||
35 | |||
36 | (% class="row" %) | ||
37 | ((( | ||
38 | (% class="col-xs-12" %) | ||
39 | ((( | ||
40 | == Use Cases == | ||
41 | ))) | ||
42 | (% class="col-xs-6" %) | ||
43 | ((( | ||
44 | [[{{image reference="Current.png" width="100%"/}}>>attach:Current.png]] | ||
45 | ))) | ||
46 | (% class="col-xs-6" %) | ||
47 | ((( | ||
48 | These are usecases that are currently covered and we will asses if/how to preserve them: | ||
49 | |||
50 | {{usecase}} | ||
51 | See the Page location in hierarchy | ||
52 | {{/usecase}} | ||
53 | |||
54 | {{usecase}} | ||
55 | Filter on location | ||
56 | {{/usecase}} | ||
57 | |||
58 | {{usecase}} | ||
59 | Differentiate from other pages that have the same name | ||
60 | {{/usecase}} | ||
61 | |||
62 | ---- | ||
63 | |||
64 | Another thing to consider is that we are currently displaying Page Names in AllDocs, but we might need to switch to display Page Titles, since otherwise we might see a lot of "WebHome"s. | ||
65 | |||
66 | ))) | ||
67 | ))) | ||
68 | |||
69 | (% class="row" %) | ||
70 | ((( | ||
71 | (% class="col-xs-12" %) | ||
72 | ((( | ||
73 | == Solutions == | ||
74 | |||
75 | {{toc start='3'/}} | ||
76 | ))) | ||
77 | ))) | ||
78 | |||
79 | (% class="row" %) | ||
80 | ((( | ||
81 | (% class="col-xs-12" %) | ||
82 | ((( | ||
83 | === Sol 1: Minified breadcrumb === | ||
84 | ))) | ||
85 | (% class="col-xs-6" %) | ||
86 | ((( | ||
87 | [[{{image reference="Sol-I.png" width="100%"/}}>>attach:Sol-I.png]] | ||
88 | ))) | ||
89 | (% class="col-xs-6" %) | ||
90 | ((( | ||
91 | |||
92 | Have a 'Location' column that displays a minified breadcrumb | ||
93 | On hover, display the full breadcrumb in the title/tooltip | ||
94 | (%class="table"%) | ||
95 | |(%width='50%'%){{success}}UC1{{/success}} {{success}}UC3{{/success}}|{{warning}}UC2{{/warning}} | ||
96 | ||{{error}}Cons{{/error}} Scalability issues | ||
97 | ||{{error}}Cons{{/error}} Displays duplicate / irrelevant information (like Home icon) | ||
98 | ||{{error}}Cons{{/error}} Hover is problematic for mobiles | ||
99 | ))) | ||
100 | ))) | ||
101 | |||
102 | (% class="row" %) | ||
103 | ((( | ||
104 | (% class="col-xs-12" %) | ||
105 | ((( | ||
106 | === Sol 2: Rename 'Space' to 'Parent' === | ||
107 | ))) | ||
108 | (% class="col-xs-6" %) | ||
109 | ((( | ||
110 | [[{{image reference="Sol-II-A.png" width="100%"/}}>>attach:Sol-II-A.png]] | ||
111 | ))) | ||
112 | (% class="col-xs-6" %) | ||
113 | ((( | ||
114 | |||
115 | (%class="table"%) | ||
116 | Rename 'Space' column to 'Parent' | ||
117 | |(%width='50%'%){{success}}UC3{{/success}}|{{warning}}UC1{{/warning}} [[Partially>>attach:Sol-II-B.png]], just 1 level | ||
118 | |{{success}}Pros{{/success}} Very simple to implement|{{warning}}UC2{{/warning}} Partially, just 1 level | ||
119 | |{{info}}Candidate{{/info}} | | ||
120 | ))) | ||
121 | ))) | ||
122 | |||
123 | (% class="row" %) | ||
124 | ((( | ||
125 | (% class="col-xs-12" %) | ||
126 | ((( | ||
127 | === Sol 3: Add 'Parent' info in 'Page' column === | ||
128 | ))) | ||
129 | (% class="col-xs-6" %) | ||
130 | ((( | ||
131 | [[{{image reference="Sol-VI.png" width="100%"/}}>>attach:Sol-VI.png]] | ||
132 | ))) | ||
133 | (% class="col-xs-6" %) | ||
134 | ((( | ||
135 | Combine 'Page' and 'Space' columns in a custom displayer | ||
136 | (%class="table"%) | ||
137 | |(%width='50%'%){{success}}UC3{{/success}}|{{warning}}UC1{{/warning}} Partially, just 1 level | ||
138 | ||{{error}}UC2{{/error}} | ||
139 | ))) | ||
140 | ))) | ||
141 | |||
142 | (% class="row" %) | ||
143 | ((( | ||
144 | (% class="col-xs-12" %) | ||
145 | ((( | ||
146 | === Sol 4: Remove 'Space' column === | ||
147 | ))) | ||
148 | (% class="col-xs-6" %) | ||
149 | ((( | ||
150 | [[{{image reference="Sol-III-A.png" width="100%"/}}>>attach:Sol-III-A.png]] | ||
151 | ))) | ||
152 | (% class="col-xs-6" %) | ||
153 | ((( | ||
154 | Consider the hierarchy is better suited in a Tree and remove the 'Space' column | ||
155 | (%class="table"%) | ||
156 | |(%width='50%'%){{success}}Pros{{/success}} Trees are better to display hierarchies |{{error}}UC1{{/error}} {{error}}UC2{{/error}} | ||
157 | || {{warning}}UC3{{/warning}} Can be improved by using the Page Title | ||
158 | ))) | ||
159 | ))) | ||
160 | |||
161 | (% class="row" %) | ||
162 | ((( | ||
163 | (% class="col-xs-12" %) | ||
164 | ((( | ||
165 | === Sol 5: Show location on hover === | ||
166 | ))) | ||
167 | (% class="col-xs-6" %) | ||
168 | ((( | ||
169 | [[{{image reference="Sol-III-C.png" width="100%"/}}>>attach:Sol-III-C.png]] | ||
170 | ))) | ||
171 | (% class="col-xs-6" %) | ||
172 | ((( | ||
173 | (%class="table"%) | ||
174 | |(%width='50%'%)|{{warning}}UC1{{/warning}} Partially, only on hover | ||
175 | || {{error}}UC2{{/error}} | ||
176 | || {{warning}}UC3{{/warning}} Can be improved by using the Page Title | ||
177 | || {{error}}Cons{{/error}} Hover is problematic for mobiles | ||
178 | ))) | ||
179 | ))) | ||
180 | |||
181 | (% class="row" %) | ||
182 | ((( | ||
183 | (% class="col-xs-12" %) | ||
184 | ((( | ||
185 | === Sol 6: Custom suggest to filter on location, name === | ||
186 | ))) | ||
187 | (% class="col-xs-6" %) | ||
188 | ((( | ||
189 | [[{{image reference="Sol-III-B.png" width="100%"/}}>>attach:Sol-III-B.png]] | ||
190 | ))) | ||
191 | (% class="col-xs-6" %) | ||
192 | ((( | ||
193 | Allow to filter for Page Title, Page Name and Location in the same suggest | ||
194 | (%class="table"%) | ||
195 | |(%width='50%'%){{success}}UC2{{/success}} |{{warning}}UC1{{/warning}} Partially, only on filtering | ||
196 | || {{warning}}UC3{{/warning}} Can be improved by using the Page Title OR Partially, only on filtering | ||
197 | || {{error}}Cons{{/error}} Hard to implement | ||
198 | ))) | ||
199 | ))) | ||
200 | |||
201 | (% class="row" %) | ||
202 | ((( | ||
203 | (% class="col-xs-12" %) | ||
204 | ((( | ||
205 | === Sol 7: 'Locate' action === | ||
206 | ))) | ||
207 | (% class="col-xs-6" %) | ||
208 | ((( | ||
209 | [[{{image reference="Sol-V.png" width="100%"/}}>>attach:Sol-V.png]] | ||
210 | ))) | ||
211 | (% class="col-xs-6" %) | ||
212 | ((( | ||
213 | Provide a 'Locate in Hierarchy' action that will open the Tree with the requested page highlighted | ||
214 | (%class="table"%) | ||
215 | |(%width='50%'%)|{{warning}}UC1{{/warning}} Partially, on demand | ||
216 | ||{{error}}UC2{{/error}} | ||
217 | || {{warning}}UC3{{/warning}} Can be improved by using the Page Title | ||
218 | ))) | ||
219 | ))) | ||
220 | |||
221 | (% class="row" %) | ||
222 | ((( | ||
223 | (% class="col-xs-12" %) | ||
224 | ((( | ||
225 | === Sol 8: Display reference and filter in a single column === | ||
226 | ))) | ||
227 | (% class="col-xs-6" %) | ||
228 | ((( | ||
229 | [[{{image reference="Sol-IV.png" width="100%"/}}>>attach:Sol-IV.png]] | ||
230 | ))) | ||
231 | (% class="col-xs-6" %) | ||
232 | ((( | ||
233 | |||
234 | (%class="table"%) | ||
235 | |(%width='50%'%){{success}}UC1{{/success}} {{success}}UC3{{/success}}|{{warning}}UC2{{/warning}} Complicated | ||
236 | ||{{error}}Cons{{/error}} Scalability issues | ||
237 | ||{{error}}Cons{{/error}} Looks technical | ||
238 | ))) | ||
239 | ))) | ||
240 | |||
241 | (% class="row" %) | ||
242 | ((( | ||
243 | (% class="col-xs-12" %) | ||
244 | ((( | ||
245 | === Iteration 2 === | ||
246 | ))) | ||
247 | ))) | ||
248 | |||
249 | (% class="row" %) | ||
250 | ((( | ||
251 | (% class="col-xs-12" %) | ||
252 | ((( | ||
253 | ==== Sol 2.1: Rename 'Space' to 'Location' ==== | ||
254 | ))) | ||
255 | ))) | ||
256 | |||
257 | (% class="row" %) | ||
258 | ((( | ||
259 | (% class="col-xs-12" %) | ||
260 | ((( | ||
261 | ===== Sol 2.1.1: Displaying Page Name + Space Reference ===== | ||
262 | |||
263 | Similar to Sol 3.1.1 | ||
264 | ))) | ||
265 | (% class="col-xs-6" %) | ||
266 | ((( | ||
267 | [[{{image reference="Sol-2-1-1.png" width="100%"/}}>>attach:Sol-2-1-1.png]] | ||
268 | ))) | ||
269 | (% class="col-xs-6" %) | ||
270 | ((( | ||
271 | |||
272 | (%class="table"%) | ||
273 | |(%width='50%'%){{success}}UC1{{/success}} {{success}}UC2{{/success}} {{success}}UC3{{/success}}| {{error}}Cons{{/error}} Page Title is not displayed | ||
274 | ||{{success}}Pros{{/success}} Page Name is displayed | ||
275 | ||{{error}}Cons{{/error}} Redundant display of 'WebHome', which we will replace since it's technical | ||
276 | ||{{error}}Cons{{/error}} Scalability issues | ||
277 | ))) | ||
278 | ))) | ||
279 | |||
280 | (% class="row" %) | ||
281 | ((( | ||
282 | (% class="col-xs-12" %) | ||
283 | ((( | ||
284 | ===== Sol 2.1.2: Displaying Page Title + Space Reference ===== | ||
285 | |||
286 | Similar to Sol 3.1.2 | ||
287 | ))) | ||
288 | (% class="col-xs-6" %) | ||
289 | ((( | ||
290 | [[{{image reference="Sol-2-1-2.png" width="100%"/}}>>attach:Sol-2-1-2.png]] | ||
291 | ))) | ||
292 | (% class="col-xs-6" %) | ||
293 | ((( | ||
294 | |||
295 | (%class="table"%) | ||
296 | |(%width='50%'%){{warning}}UC1{{/warning}} {{success}}UC2{{/success}} {{warning}}UC3{{/warning}}| {{success}}Pros{{/success}} Page Title is displayed | ||
297 | ||{{error}}Cons{{/error}} Page name is not displayed | ||
298 | ||{{error}}Cons{{/error}} Hard to differentiate terminal pages from non-terminal pages without displaying 'WebHome' | ||
299 | ||{{error}}Cons{{/error}} Scalability issues | ||
300 | ))) | ||
301 | ))) | ||
302 | |||
303 | (% class="row" %) | ||
304 | ((( | ||
305 | (% class="col-xs-12" %) | ||
306 | ((( | ||
307 | ===== Sol 2.1.3: Displaying Page Title + Space URL ===== | ||
308 | |||
309 | Similar to Sol 3.1.3 | ||
310 | ))) | ||
311 | (% class="col-xs-6" %) | ||
312 | ((( | ||
313 | [[{{image reference="Sol-2-1-3.png" width="100%"/}}>>attach:Sol-2-1-3.png]] | ||
314 | ))) | ||
315 | (% class="col-xs-6" %) | ||
316 | ((( | ||
317 | |||
318 | (%class="table"%) | ||
319 | |(%width='50%'%){{success}}UC1{{/success}} {{success}}UC2{{/success}} {{success}}UC3{{/success}}|{{success}}Pros{{/success}} Page Title is displayed | ||
320 | ||{{success}}Cons{{/success}} Page name are displayed (except 'WebHome') | ||
321 | ||{{success}}Cons{{/success}} Terminal pages are differentiated from non-terminal pages by the presence of '/' | ||
322 | ||{{error}}Cons{{/error}} Scalability issues | ||
323 | ))) | ||
324 | ))) | ||
325 | |||
326 | (% class="row" %) | ||
327 | ((( | ||
328 | (% class="col-xs-12" %) | ||
329 | ((( | ||
330 | ))) | ||
331 | (% class="col-xs-6" %) | ||
332 | ((( | ||
333 | [[{{image reference="Sol-2-1-3-B.png" width="100%"/}}>>attach:Sol-2-1-3-B.png]] | ||
334 | ))) | ||
335 | (% class="col-xs-6" %) | ||
336 | ((( | ||
337 | |||
338 | Filtering on 'B' char in Location column | ||
339 | (%class="table"%) | ||
340 | |(%width='50%'%)|{{success}}Pros{{/success}} Filtering is done individual per column | ||
341 | ))) | ||
342 | ))) | ||
343 | |||
344 | (% class="row" %) | ||
345 | ((( | ||
346 | (% class="col-xs-12" %) | ||
347 | ((( | ||
348 | ))) | ||
349 | (% class="col-xs-6" %) | ||
350 | ((( | ||
351 | [[{{image reference="Sol-2-1-3-C.png" width="100%"/}}>>attach:Sol-2-1-3-C.png]] | ||
352 | ))) | ||
353 | (% class="col-xs-6" %) | ||
354 | ((( | ||
355 | |||
356 | Filtering on 'B' char in Page Title column, while the Location column's filtering is still active | ||
357 | (%class="table"%) | ||
358 | |(%width='50%'%){{info}}Candidate{{/info}} | | ||
359 | ))) | ||
360 | ))) | ||
361 | |||
362 | (% class="row" %) | ||
363 | ((( | ||
364 | (% class="col-xs-12" %) | ||
365 | ((( | ||
366 | ==== Sol 3.1: Add 'Location' info in 'Page' column ==== | ||
367 | ))) | ||
368 | ))) | ||
369 | |||
370 | (% class="row" %) | ||
371 | ((( | ||
372 | (% class="col-xs-12" %) | ||
373 | ((( | ||
374 | ===== Sol 3.1.1: Displaying Page Title + Page Reference ===== | ||
375 | |||
376 | Similar to Sol 2.1.1 | ||
377 | ))) | ||
378 | (% class="col-xs-6" %) | ||
379 | ((( | ||
380 | [[{{image reference="Sol-3-1-1.png" width="100%"/}}>>attach:Sol-3-1-1.png]] | ||
381 | ))) | ||
382 | (% class="col-xs-6" %) | ||
383 | ((( | ||
384 | |||
385 | (%class="table"%) | ||
386 | |(%width='50%'%){{success}}UC1{{/success}} {{success}}UC2{{/success}} {{success}}UC3{{/success}}|{{success}}Pros{{/success}} Page Title is not displayed | ||
387 | ||{{success}}Pros{{/success}} Page Name is displayed | ||
388 | ||{{error}}Cons{{/error}} Technical 'WebHome' is displayed | ||
389 | ||{{error}}Cons{{/error}} Scalability issues | ||
390 | ))) | ||
391 | ))) | ||
392 | |||
393 | (% class="row" %) | ||
394 | ((( | ||
395 | (% class="col-xs-12" %) | ||
396 | ((( | ||
397 | ===== Sol 3.1.2: Displaying Page Title + Space Reference ===== | ||
398 | |||
399 | Similar to Sol 2.1.2 | ||
400 | ))) | ||
401 | (% class="col-xs-6" %) | ||
402 | ((( | ||
403 | [[{{image reference="Sol-3-1-2.png" width="100%"/}}>>attach:Sol-3-1-2.png]] | ||
404 | ))) | ||
405 | (% class="col-xs-6" %) | ||
406 | ((( | ||
407 | |||
408 | (%class="table"%) | ||
409 | |(%width='50%'%){{warning}}UC1{{/warning}} {{success}}UC2{{/success}} {{warning}}UC3{{/warning}}|{{error}}Cons{{/error}} Page name is not displayed | ||
410 | ||{{error}}Cons{{/error}} Hard to differentiate terminal pages from non-terminal pages without displaying 'WebHome' | ||
411 | ||{{error}}Cons{{/error}} Scalability issues | ||
412 | ))) | ||
413 | ))) | ||
414 | |||
415 | (% class="row" %) | ||
416 | ((( | ||
417 | (% class="col-xs-12" %) | ||
418 | ((( | ||
419 | ===== Sol 3.1.3: Displaying Page Title + Space URL ===== | ||
420 | |||
421 | Similar to Sol 2.1.3 | ||
422 | ))) | ||
423 | (% class="col-xs-6" %) | ||
424 | ((( | ||
425 | [[{{image reference="Sol-3-1-3.png" width="100%"/}}>>attach:Sol-3-1-3.png]] | ||
426 | ))) | ||
427 | (% class="col-xs-6" %) | ||
428 | ((( | ||
429 | |||
430 | (%class="table"%) | ||
431 | |(%width='50%'%){{success}}UC1{{/success}} {{success}}UC2{{/success}} {{success}}UC3{{/success}}|{{success}}Pros{{/success}} Page Title is displayed | ||
432 | ||{{success}}Cons{{/success}} Page name are displayed (except 'WebHome') | ||
433 | ||{{success}}Cons{{/success}} Terminal pages are differentiated from non-terminal pages by the presence of '/' | ||
434 | ||{{error}}Cons{{/error}} Scalability issues | ||
435 | ))) | ||
436 | ))) | ||
437 | |||
438 | (% class="row" %) | ||
439 | ((( | ||
440 | (% class="col-xs-12" %) | ||
441 | ((( | ||
442 | ))) | ||
443 | (% class="col-xs-6" %) | ||
444 | ((( | ||
445 | [[{{image reference="Sol-3-1-3-B.png" width="100%"/}}>>attach:Sol-3-1-3-B.png]] | ||
446 | ))) | ||
447 | (% class="col-xs-6" %) | ||
448 | ((( | ||
449 | |||
450 | Filtering on 'B' char reveals results both in Page title and Location | ||
451 | (%class="table"%) | ||
452 | |(%width='50%'%)|{{warning}}Cons{{/warning}} Cannot filter only on page title or only on location | ||
453 | ))) | ||
454 | ))) |