Wiki source code of Nested: Livetable
Last modified by Vincent Massol on 2024/11/19 16:14
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 | ))) |
