5.4/php/api/form_builder/overview/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="icon" href="../../../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.0">
  14
  15
  16
  17         <title>Overview - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../../../assets/stylesheets/main.33e2939f.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../../../assets/stylesheets/palette.ef6f36e2.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55     <script>function __prefix(e){return new URL("../../../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  56
  57     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  58     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  59     <label class="md-overlay" for="__drawer"></label>
  60     <div data-md-component="skip">
  61
  62
  63         <a href="#form-builder" class="md-skip">
  64           Skip to content
  65         </a>
  66
  67     </div>
  68     <div data-md-component="announce">
  69
  70         <aside class="md-announce">
  71           <div class="md-announce__inner md-grid md-typeset">
  72
  73     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  74
  75           </div>
  76         </aside>
  77
  78     </div>
  79
  80       <header class="md-header" data-md-component="header">
  81   <nav class="md-header__inner md-grid" aria-label="Header">
  82     <a href="../../../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  83
  84   <img src="../../../../assets/logo.png" alt="logo">
  85
  86     </a>
  87     <label class="md-header__button md-icon" for="__drawer">
  88       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  89     </label>
  90     <div class="md-header__title" data-md-component="header-title">
  91       <div class="md-header__ellipsis">
  92         <div class="md-header__topic">
  93           <span class="md-ellipsis">
  94             WoltLab Suite Documentation
  95           </span>
  96         </div>
  97         <div class="md-header__topic" data-md-component="header-topic">
  98           <span class="md-ellipsis">
  99
 100               Overview
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106
 107
 108
 109       <label class="md-header__button md-icon" for="__search">
 110         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 111       </label>
 112
 113 <div class="md-search" data-md-component="search" role="dialog">
 114   <label class="md-search__overlay" for="__search"></label>
 115   <div class="md-search__inner" role="search">
 116     <form class="md-search__form" name="search">
 117       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
 118       <label class="md-search__icon md-icon" for="__search">
 119         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 120         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
 121       </label>
 122       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 123         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 124       </button>
 125     </form>
 126     <div class="md-search__output">
 127       <div class="md-search__scrollwrap" data-md-scrollfix>
 128         <div class="md-search-result" data-md-component="search-result">
 129           <div class="md-search-result__meta">
 130             Initializing search
 131           </div>
 132           <ol class="md-search-result__list"></ol>
 133         </div>
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139
 140       <div class="md-header__source">
 141
 142 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 143   <div class="md-source__icon md-icon">
 144
 145     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 146   </div>
 147   <div class="md-source__repository">
 148     GitHub
 149   </div>
 150 </a>
 151       </div>
 152
 153   </nav>
 154 </header>
 155
 156     <div class="md-container" data-md-component="container">
 157
 158
 159
 160
 161       <main class="md-main" data-md-component="main">
 162         <div class="md-main__inner md-grid">
 163
 164
 165
 166               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 167                 <div class="md-sidebar__scrollwrap">
 168                   <div class="md-sidebar__inner">
 169
 170
 171
 172 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 173   <label class="md-nav__title" for="__drawer">
 174     <a href="../../../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 175
 176   <img src="../../../../assets/logo.png" alt="logo">
 177
 178     </a>
 179     WoltLab Suite Documentation
 180   </label>
 181
 182     <div class="md-nav__source">
 183
 184 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 185   <div class="md-source__icon md-icon">
 186
 187     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 188   </div>
 189   <div class="md-source__repository">
 190     GitHub
 191   </div>
 192 </a>
 193     </div>
 194
 195   <ul class="md-nav__list" data-md-scrollfix>
 196
 197
 198
 199
 200
 201
 202
 203
 204     <li class="md-nav__item">
 205       <a href="../../../../getting-started/" class="md-nav__link">
 206         Getting Started
 207       </a>
 208     </li>
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 223
 224
 225         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" checked>
 226
 227       <label class="md-nav__link" for="__nav_2">
 228         PHP API
 229         <span class="md-nav__icon md-icon"></span>
 230       </label>
 231       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 232         <label class="md-nav__title" for="__nav_2">
 233           <span class="md-nav__icon md-icon"></span>
 234           PHP API
 235         </label>
 236         <ul class="md-nav__list" data-md-scrollfix>
 237
 238
 239
 240
 241
 242     <li class="md-nav__item">
 243       <a href="../../../pages/" class="md-nav__link">
 244         Pages
 245       </a>
 246     </li>
 247
 248
 249
 250
 251
 252
 253
 254     <li class="md-nav__item">
 255       <a href="../../../database-objects/" class="md-nav__link">
 256         Database Objects
 257       </a>
 258     </li>
 259
 260
 261
 262
 263
 264
 265
 266     <li class="md-nav__item">
 267       <a href="../../../database-access/" class="md-nav__link">
 268         Database Access
 269       </a>
 270     </li>
 271
 272
 273
 274
 275
 276
 277
 278     <li class="md-nav__item">
 279       <a href="../../../exceptions/" class="md-nav__link">
 280         Exceptions
 281       </a>
 282     </li>
 283
 284
 285
 286
 287
 288
 289
 290
 291
 292
 293     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 294
 295
 296         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" checked>
 297
 298       <label class="md-nav__link" for="__nav_2_5">
 299         API
 300         <span class="md-nav__icon md-icon"></span>
 301       </label>
 302       <nav class="md-nav" aria-label="API" data-md-level="2">
 303         <label class="md-nav__title" for="__nav_2_5">
 304           <span class="md-nav__icon md-icon"></span>
 305           API
 306         </label>
 307         <ul class="md-nav__list" data-md-scrollfix>
 308
 309
 310
 311
 312
 313     <li class="md-nav__item">
 314       <a href="../../caches/" class="md-nav__link">
 315         Caches
 316       </a>
 317     </li>
 318
 319
 320
 321
 322
 323
 324
 325     <li class="md-nav__item">
 326       <a href="../../comments/" class="md-nav__link">
 327         Comments
 328       </a>
 329     </li>
 330
 331
 332
 333
 334
 335
 336
 337     <li class="md-nav__item">
 338       <a href="../../cronjobs/" class="md-nav__link">
 339         Cronjobs
 340       </a>
 341     </li>
 342
 343
 344
 345
 346
 347
 348
 349     <li class="md-nav__item">
 350       <a href="../../events/" class="md-nav__link">
 351         Events
 352       </a>
 353     </li>
 354
 355
 356
 357
 358
 359
 360
 361
 362
 363
 364     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 365
 366
 367         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" checked>
 368
 369       <label class="md-nav__link" for="__nav_2_5_5">
 370         Form Builder
 371         <span class="md-nav__icon md-icon"></span>
 372       </label>
 373       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 374         <label class="md-nav__title" for="__nav_2_5_5">
 375           <span class="md-nav__icon md-icon"></span>
 376           Form Builder
 377         </label>
 378         <ul class="md-nav__list" data-md-scrollfix>
 379
 380
 381
 382
 383
 384
 385
 386     <li class="md-nav__item md-nav__item--active">
 387
 388       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 389
 390
 391
 392
 393         <label class="md-nav__link md-nav__link--active" for="__toc">
 394           Overview
 395           <span class="md-nav__icon md-icon"></span>
 396         </label>
 397
 398       <a href="./" class="md-nav__link md-nav__link--active">
 399         Overview
 400       </a>
 401
 402
 403 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 404
 405
 406
 407
 408
 409     <label class="md-nav__title" for="__toc">
 410       <span class="md-nav__icon md-icon"></span>
 411       Table of contents
 412     </label>
 413     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 414
 415         <li class="md-nav__item">
 416   <a href="#advantages-of-form-builder" class="md-nav__link">
 417     Advantages of Form Builder
 418   </a>
 419
 420 </li>
 421
 422         <li class="md-nav__item">
 423   <a href="#form-builder-components" class="md-nav__link">
 424     Form Builder Components
 425   </a>
 426
 427 </li>
 428
 429         <li class="md-nav__item">
 430   <a href="#abstractformbuilderform" class="md-nav__link">
 431     AbstractFormBuilderForm
 432   </a>
 433
 434 </li>
 435
 436         <li class="md-nav__item">
 437   <a href="#dialogformdocument" class="md-nav__link">
 438     DialogFormDocument
 439   </a>
 440
 441 </li>
 442
 443     </ul>
 444
 445 </nav>
 446
 447     </li>
 448
 449
 450
 451
 452
 453
 454
 455     <li class="md-nav__item">
 456       <a href="../structure/" class="md-nav__link">
 457         Structure
 458       </a>
 459     </li>
 460
 461
 462
 463
 464
 465
 466
 467     <li class="md-nav__item">
 468       <a href="../form_fields/" class="md-nav__link">
 469         Fields
 470       </a>
 471     </li>
 472
 473
 474
 475
 476
 477
 478
 479     <li class="md-nav__item">
 480       <a href="../validation_data/" class="md-nav__link">
 481         Validation and Data
 482       </a>
 483     </li>
 484
 485
 486
 487
 488
 489
 490
 491     <li class="md-nav__item">
 492       <a href="../dependencies/" class="md-nav__link">
 493         Dependencies
 494       </a>
 495     </li>
 496
 497
 498
 499         </ul>
 500       </nav>
 501     </li>
 502
 503
 504
 505
 506
 507
 508
 509     <li class="md-nav__item">
 510       <a href="../../package_installation_plugins/" class="md-nav__link">
 511         Package Installation Plugins
 512       </a>
 513     </li>
 514
 515
 516
 517
 518
 519
 520
 521     <li class="md-nav__item">
 522       <a href="../../user_activity_points/" class="md-nav__link">
 523         User Activity Points
 524       </a>
 525     </li>
 526
 527
 528
 529
 530
 531
 532
 533     <li class="md-nav__item">
 534       <a href="../../user_notifications/" class="md-nav__link">
 535         User Notifications
 536       </a>
 537     </li>
 538
 539
 540
 541
 542
 543
 544
 545     <li class="md-nav__item">
 546       <a href="../../sitemaps/" class="md-nav__link">
 547         Sitemaps
 548       </a>
 549     </li>
 550
 551
 552
 553         </ul>
 554       </nav>
 555     </li>
 556
 557
 558
 559
 560
 561
 562
 563     <li class="md-nav__item">
 564       <a href="../../../code-style/" class="md-nav__link">
 565         Code Style
 566       </a>
 567     </li>
 568
 569
 570
 571
 572
 573
 574
 575     <li class="md-nav__item">
 576       <a href="../../../apps/" class="md-nav__link">
 577         Apps
 578       </a>
 579     </li>
 580
 581
 582
 583
 584
 585
 586
 587     <li class="md-nav__item">
 588       <a href="../../../gdpr/" class="md-nav__link">
 589         GDPR
 590       </a>
 591     </li>
 592
 593
 594
 595         </ul>
 596       </nav>
 597     </li>
 598
 599
 600
 601
 602
 603
 604
 605
 606
 607
 608
 609     <li class="md-nav__item md-nav__item--nested">
 610
 611
 612         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 613
 614       <label class="md-nav__link" for="__nav_3">
 615         Languages, Templates & CSS
 616         <span class="md-nav__icon md-icon"></span>
 617       </label>
 618       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 619         <label class="md-nav__title" for="__nav_3">
 620           <span class="md-nav__icon md-icon"></span>
 621           Languages, Templates & CSS
 622         </label>
 623         <ul class="md-nav__list" data-md-scrollfix>
 624
 625
 626
 627
 628
 629     <li class="md-nav__item">
 630       <a href="../../../../view/languages/" class="md-nav__link">
 631         Languages
 632       </a>
 633     </li>
 634
 635
 636
 637
 638
 639
 640
 641     <li class="md-nav__item">
 642       <a href="../../../../view/templates/" class="md-nav__link">
 643         Templates
 644       </a>
 645     </li>
 646
 647
 648
 649
 650
 651
 652
 653     <li class="md-nav__item">
 654       <a href="../../../../view/css/" class="md-nav__link">
 655         CSS
 656       </a>
 657     </li>
 658
 659
 660
 661         </ul>
 662       </nav>
 663     </li>
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675     <li class="md-nav__item md-nav__item--nested">
 676
 677
 678         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
 679
 680       <label class="md-nav__link" for="__nav_4">
 681         JavaScript API
 682         <span class="md-nav__icon md-icon"></span>
 683       </label>
 684       <nav class="md-nav" aria-label="JavaScript API" data-md-level="1">
 685         <label class="md-nav__title" for="__nav_4">
 686           <span class="md-nav__icon md-icon"></span>
 687           JavaScript API
 688         </label>
 689         <ul class="md-nav__list" data-md-scrollfix>
 690
 691
 692
 693
 694
 695     <li class="md-nav__item">
 696       <a href="../../../../javascript/general-usage/" class="md-nav__link">
 697         General Usage
 698       </a>
 699     </li>
 700
 701
 702
 703
 704
 705
 706
 707
 708     <li class="md-nav__item md-nav__item--nested">
 709
 710
 711         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" >
 712
 713       <label class="md-nav__link" for="__nav_4_2">
 714         New API
 715         <span class="md-nav__icon md-icon"></span>
 716       </label>
 717       <nav class="md-nav" aria-label="New API" data-md-level="2">
 718         <label class="md-nav__title" for="__nav_4_2">
 719           <span class="md-nav__icon md-icon"></span>
 720           New API
 721         </label>
 722         <ul class="md-nav__list" data-md-scrollfix>
 723
 724
 725
 726
 727
 728     <li class="md-nav__item">
 729       <a href="../../../../javascript/new-api_writing-a-module/" class="md-nav__link">
 730         Writing a module
 731       </a>
 732     </li>
 733
 734
 735
 736
 737
 738
 739
 740     <li class="md-nav__item">
 741       <a href="../../../../javascript/new-api_data-structures/" class="md-nav__link">
 742         Data Structures
 743       </a>
 744     </li>
 745
 746
 747
 748
 749
 750
 751
 752     <li class="md-nav__item">
 753       <a href="../../../../javascript/new-api_core/" class="md-nav__link">
 754         Core Functions
 755       </a>
 756     </li>
 757
 758
 759
 760
 761
 762
 763
 764     <li class="md-nav__item">
 765       <a href="../../../../javascript/new-api_dom/" class="md-nav__link">
 766         DOM
 767       </a>
 768     </li>
 769
 770
 771
 772
 773
 774
 775
 776     <li class="md-nav__item">
 777       <a href="../../../../javascript/new-api_events/" class="md-nav__link">
 778         Event Handling
 779       </a>
 780     </li>
 781
 782
 783
 784
 785
 786
 787
 788     <li class="md-nav__item">
 789       <a href="../../../../javascript/new-api_ajax/" class="md-nav__link">
 790         Ajax
 791       </a>
 792     </li>
 793
 794
 795
 796
 797
 798
 799
 800     <li class="md-nav__item">
 801       <a href="../../../../javascript/new-api_dialogs/" class="md-nav__link">
 802         Dialogs
 803       </a>
 804     </li>
 805
 806
 807
 808
 809
 810
 811
 812     <li class="md-nav__item">
 813       <a href="../../../../javascript/new-api_browser/" class="md-nav__link">
 814         Browser and Screen Sizes
 815       </a>
 816     </li>
 817
 818
 819
 820
 821
 822
 823
 824     <li class="md-nav__item">
 825       <a href="../../../../javascript/new-api_ui/" class="md-nav__link">
 826         User Interface
 827       </a>
 828     </li>
 829
 830
 831
 832         </ul>
 833       </nav>
 834     </li>
 835
 836
 837
 838
 839
 840
 841
 842     <li class="md-nav__item">
 843       <a href="../../../../javascript/legacy-api/" class="md-nav__link">
 844         Legacy API
 845       </a>
 846     </li>
 847
 848
 849
 850
 851
 852
 853
 854     <li class="md-nav__item">
 855       <a href="../../../../javascript/helper-functions/" class="md-nav__link">
 856         Helper Functions
 857       </a>
 858     </li>
 859
 860
 861
 862
 863
 864
 865
 866     <li class="md-nav__item">
 867       <a href="../../../../javascript/code-snippets/" class="md-nav__link">
 868         Code Snippets
 869       </a>
 870     </li>
 871
 872
 873
 874         </ul>
 875       </nav>
 876     </li>
 877
 878
 879
 880
 881
 882
 883
 884
 885
 886
 887
 888     <li class="md-nav__item md-nav__item--nested">
 889
 890
 891         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
 892
 893       <label class="md-nav__link" for="__nav_5">
 894         Package Components
 895         <span class="md-nav__icon md-icon"></span>
 896       </label>
 897       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
 898         <label class="md-nav__title" for="__nav_5">
 899           <span class="md-nav__icon md-icon"></span>
 900           Package Components
 901         </label>
 902         <ul class="md-nav__list" data-md-scrollfix>
 903
 904
 905
 906
 907
 908     <li class="md-nav__item">
 909       <a href="../../../../package/package-xml/" class="md-nav__link">
 910         package.xml
 911       </a>
 912     </li>
 913
 914
 915
 916
 917
 918
 919
 920
 921     <li class="md-nav__item md-nav__item--nested">
 922
 923
 924         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
 925
 926       <label class="md-nav__link" for="__nav_5_2">
 927         PIPs
 928         <span class="md-nav__icon md-icon"></span>
 929       </label>
 930       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
 931         <label class="md-nav__title" for="__nav_5_2">
 932           <span class="md-nav__icon md-icon"></span>
 933           PIPs
 934         </label>
 935         <ul class="md-nav__list" data-md-scrollfix>
 936
 937
 938
 939
 940
 941     <li class="md-nav__item">
 942       <a href="../../../../package/pip/" class="md-nav__link">
 943         Overview
 944       </a>
 945     </li>
 946
 947
 948
 949
 950
 951
 952
 953     <li class="md-nav__item">
 954       <a href="../../../../package/pip/acl-option/" class="md-nav__link">
 955         aclOption
 956       </a>
 957     </li>
 958
 959
 960
 961
 962
 963
 964
 965     <li class="md-nav__item">
 966       <a href="../../../../package/pip/acp-menu/" class="md-nav__link">
 967         acpMenu
 968       </a>
 969     </li>
 970
 971
 972
 973
 974
 975
 976
 977     <li class="md-nav__item">
 978       <a href="../../../../package/pip/acp-search-provider/" class="md-nav__link">
 979         acpSearchProvider
 980       </a>
 981     </li>
 982
 983
 984
 985
 986
 987
 988
 989     <li class="md-nav__item">
 990       <a href="../../../../package/pip/acp-template/" class="md-nav__link">
 991         acpTemplate
 992       </a>
 993     </li>
 994
 995
 996
 997
 998
 999
1000
1001     <li class="md-nav__item">
1002       <a href="../../../../package/pip/bbcode/" class="md-nav__link">
1003         bbcode
1004       </a>
1005     </li>
1006
1007
1008
1009
1010
1011
1012
1013     <li class="md-nav__item">
1014       <a href="../../../../package/pip/box/" class="md-nav__link">
1015         box
1016       </a>
1017     </li>
1018
1019
1020
1021
1022
1023
1024
1025     <li class="md-nav__item">
1026       <a href="../../../../package/pip/clipboard-action/" class="md-nav__link">
1027         clipboardAction
1028       </a>
1029     </li>
1030
1031
1032
1033
1034
1035
1036
1037     <li class="md-nav__item">
1038       <a href="../../../../package/pip/core-object/" class="md-nav__link">
1039         coreObject
1040       </a>
1041     </li>
1042
1043
1044
1045
1046
1047
1048
1049     <li class="md-nav__item">
1050       <a href="../../../../package/pip/cronjob/" class="md-nav__link">
1051         cronjob
1052       </a>
1053     </li>
1054
1055
1056
1057
1058
1059
1060
1061     <li class="md-nav__item">
1062       <a href="../../../../package/pip/event-listener/" class="md-nav__link">
1063         eventListener
1064       </a>
1065     </li>
1066
1067
1068
1069
1070
1071
1072
1073     <li class="md-nav__item">
1074       <a href="../../../../package/pip/file/" class="md-nav__link">
1075         file
1076       </a>
1077     </li>
1078
1079
1080
1081
1082
1083
1084
1085     <li class="md-nav__item">
1086       <a href="../../../../package/pip/language/" class="md-nav__link">
1087         language
1088       </a>
1089     </li>
1090
1091
1092
1093
1094
1095
1096
1097     <li class="md-nav__item">
1098       <a href="../../../../package/pip/media-provider/" class="md-nav__link">
1099         mediaProvider
1100       </a>
1101     </li>
1102
1103
1104
1105
1106
1107
1108
1109     <li class="md-nav__item">
1110       <a href="../../../../package/pip/menu/" class="md-nav__link">
1111         menu
1112       </a>
1113     </li>
1114
1115
1116
1117
1118
1119
1120
1121     <li class="md-nav__item">
1122       <a href="../../../../package/pip/menu-item/" class="md-nav__link">
1123         menuItem
1124       </a>
1125     </li>
1126
1127
1128
1129
1130
1131
1132
1133     <li class="md-nav__item">
1134       <a href="../../../../package/pip/object-type/" class="md-nav__link">
1135         objectType
1136       </a>
1137     </li>
1138
1139
1140
1141
1142
1143
1144
1145     <li class="md-nav__item">
1146       <a href="../../../../package/pip/object-type-definition/" class="md-nav__link">
1147         objectTypeDefinition
1148       </a>
1149     </li>
1150
1151
1152
1153
1154
1155
1156
1157     <li class="md-nav__item">
1158       <a href="../../../../package/pip/option/" class="md-nav__link">
1159         option
1160       </a>
1161     </li>
1162
1163
1164
1165
1166
1167
1168
1169     <li class="md-nav__item">
1170       <a href="../../../../package/pip/page/" class="md-nav__link">
1171         page
1172       </a>
1173     </li>
1174
1175
1176
1177
1178
1179
1180
1181     <li class="md-nav__item">
1182       <a href="../../../../package/pip/pip/" class="md-nav__link">
1183         pip
1184       </a>
1185     </li>
1186
1187
1188
1189
1190
1191
1192
1193     <li class="md-nav__item">
1194       <a href="../../../../package/pip/script/" class="md-nav__link">
1195         script
1196       </a>
1197     </li>
1198
1199
1200
1201
1202
1203
1204
1205     <li class="md-nav__item">
1206       <a href="../../../../package/pip/smiley/" class="md-nav__link">
1207         smiley
1208       </a>
1209     </li>
1210
1211
1212
1213
1214
1215
1216
1217     <li class="md-nav__item">
1218       <a href="../../../../package/pip/sql/" class="md-nav__link">
1219         sql
1220       </a>
1221     </li>
1222
1223
1224
1225
1226
1227
1228
1229     <li class="md-nav__item">
1230       <a href="../../../../package/pip/style/" class="md-nav__link">
1231         style
1232       </a>
1233     </li>
1234
1235
1236
1237
1238
1239
1240
1241     <li class="md-nav__item">
1242       <a href="../../../../package/pip/template/" class="md-nav__link">
1243         template
1244       </a>
1245     </li>
1246
1247
1248
1249
1250
1251
1252
1253     <li class="md-nav__item">
1254       <a href="../../../../package/pip/template-listener/" class="md-nav__link">
1255         templateListener
1256       </a>
1257     </li>
1258
1259
1260
1261
1262
1263
1264
1265     <li class="md-nav__item">
1266       <a href="../../../../package/pip/user-group-option/" class="md-nav__link">
1267         userGroupOption
1268       </a>
1269     </li>
1270
1271
1272
1273
1274
1275
1276
1277     <li class="md-nav__item">
1278       <a href="../../../../package/pip/user-menu/" class="md-nav__link">
1279         userMenu
1280       </a>
1281     </li>
1282
1283
1284
1285
1286
1287
1288
1289     <li class="md-nav__item">
1290       <a href="../../../../package/pip/user-notification-event/" class="md-nav__link">
1291         userNotificationEvent
1292       </a>
1293     </li>
1294
1295
1296
1297
1298
1299
1300
1301     <li class="md-nav__item">
1302       <a href="../../../../package/pip/user-option/" class="md-nav__link">
1303         userOption
1304       </a>
1305     </li>
1306
1307
1308
1309
1310
1311
1312
1313     <li class="md-nav__item">
1314       <a href="../../../../package/pip/user-profile-menu/" class="md-nav__link">
1315         userProfileMenu
1316       </a>
1317     </li>
1318
1319
1320
1321         </ul>
1322       </nav>
1323     </li>
1324
1325
1326
1327
1328
1329
1330
1331     <li class="md-nav__item">
1332       <a href="../../../../package/database-php-api/" class="md-nav__link">
1333         Database PHP API
1334       </a>
1335     </li>
1336
1337
1338
1339         </ul>
1340       </nav>
1341     </li>
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353     <li class="md-nav__item md-nav__item--nested">
1354
1355
1356         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1357
1358       <label class="md-nav__link" for="__nav_6">
1359         Migration
1360         <span class="md-nav__icon md-icon"></span>
1361       </label>
1362       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1363         <label class="md-nav__title" for="__nav_6">
1364           <span class="md-nav__icon md-icon"></span>
1365           Migration
1366         </label>
1367         <ul class="md-nav__list" data-md-scrollfix>
1368
1369
1370
1371
1372
1373
1374     <li class="md-nav__item md-nav__item--nested">
1375
1376
1377         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1378
1379       <label class="md-nav__link" for="__nav_6_1">
1380         Migrating from WSC 5.3
1381         <span class="md-nav__icon md-icon"></span>
1382       </label>
1383       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1384         <label class="md-nav__title" for="__nav_6_1">
1385           <span class="md-nav__icon md-icon"></span>
1386           Migrating from WSC 5.3
1387         </label>
1388         <ul class="md-nav__list" data-md-scrollfix>
1389
1390
1391
1392
1393
1394     <li class="md-nav__item">
1395       <a href="../../../../migration/wsc53/php/" class="md-nav__link">
1396         PHP API
1397       </a>
1398     </li>
1399
1400
1401
1402
1403
1404
1405
1406     <li class="md-nav__item">
1407       <a href="../../../../migration/wsc53/session/" class="md-nav__link">
1408         Session Handling and Authentication
1409       </a>
1410     </li>
1411
1412
1413
1414
1415
1416
1417
1418     <li class="md-nav__item">
1419       <a href="../../../../migration/wsc53/javascript/" class="md-nav__link">
1420         JavaScript
1421       </a>
1422     </li>
1423
1424
1425
1426
1427
1428
1429
1430     <li class="md-nav__item">
1431       <a href="../../../../migration/wsc53/templates/" class="md-nav__link">
1432         Templates
1433       </a>
1434     </li>
1435
1436
1437
1438
1439
1440
1441
1442     <li class="md-nav__item">
1443       <a href="../../../../migration/wsc53/libraries/" class="md-nav__link">
1444         Third Party Libraries
1445       </a>
1446     </li>
1447
1448
1449
1450         </ul>
1451       </nav>
1452     </li>
1453
1454
1455
1456
1457
1458
1459
1460
1461     <li class="md-nav__item md-nav__item--nested">
1462
1463
1464         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1465
1466       <label class="md-nav__link" for="__nav_6_2">
1467         Migrating from WSC 5.2
1468         <span class="md-nav__icon md-icon"></span>
1469       </label>
1470       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1471         <label class="md-nav__title" for="__nav_6_2">
1472           <span class="md-nav__icon md-icon"></span>
1473           Migrating from WSC 5.2
1474         </label>
1475         <ul class="md-nav__list" data-md-scrollfix>
1476
1477
1478
1479
1480
1481     <li class="md-nav__item">
1482       <a href="../../../../migration/wsc52/php/" class="md-nav__link">
1483         PHP API
1484       </a>
1485     </li>
1486
1487
1488
1489
1490
1491
1492
1493     <li class="md-nav__item">
1494       <a href="../../../../migration/wsc52/templates/" class="md-nav__link">
1495         Templates and Languages
1496       </a>
1497     </li>
1498
1499
1500
1501
1502
1503
1504
1505     <li class="md-nav__item">
1506       <a href="../../../../migration/wsc52/libraries/" class="md-nav__link">
1507         Third Party Libraries
1508       </a>
1509     </li>
1510
1511
1512
1513         </ul>
1514       </nav>
1515     </li>
1516
1517
1518
1519
1520
1521
1522
1523
1524     <li class="md-nav__item md-nav__item--nested">
1525
1526
1527         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1528
1529       <label class="md-nav__link" for="__nav_6_3">
1530         Migrating from WSC 3.1
1531         <span class="md-nav__icon md-icon"></span>
1532       </label>
1533       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1534         <label class="md-nav__title" for="__nav_6_3">
1535           <span class="md-nav__icon md-icon"></span>
1536           Migrating from WSC 3.1
1537         </label>
1538         <ul class="md-nav__list" data-md-scrollfix>
1539
1540
1541
1542
1543
1544     <li class="md-nav__item">
1545       <a href="../../../../migration/wsc31/php/" class="md-nav__link">
1546         PHP API
1547       </a>
1548     </li>
1549
1550
1551
1552         </ul>
1553       </nav>
1554     </li>
1555
1556
1557
1558
1559
1560
1561
1562
1563     <li class="md-nav__item md-nav__item--nested">
1564
1565
1566         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1567
1568       <label class="md-nav__link" for="__nav_6_4">
1569         Migrating from WSC 3.0
1570         <span class="md-nav__icon md-icon"></span>
1571       </label>
1572       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1573         <label class="md-nav__title" for="__nav_6_4">
1574           <span class="md-nav__icon md-icon"></span>
1575           Migrating from WSC 3.0
1576         </label>
1577         <ul class="md-nav__list" data-md-scrollfix>
1578
1579
1580
1581
1582
1583     <li class="md-nav__item">
1584       <a href="../../../../migration/wsc30/php/" class="md-nav__link">
1585         PHP API
1586       </a>
1587     </li>
1588
1589
1590
1591
1592
1593
1594
1595     <li class="md-nav__item">
1596       <a href="../../../../migration/wsc30/javascript/" class="md-nav__link">
1597         JavaScript API
1598       </a>
1599     </li>
1600
1601
1602
1603
1604
1605
1606
1607     <li class="md-nav__item">
1608       <a href="../../../../migration/wsc30/templates/" class="md-nav__link">
1609         Templates
1610       </a>
1611     </li>
1612
1613
1614
1615
1616
1617
1618
1619     <li class="md-nav__item">
1620       <a href="../../../../migration/wsc30/css/" class="md-nav__link">
1621         CSS
1622       </a>
1623     </li>
1624
1625
1626
1627
1628
1629
1630
1631     <li class="md-nav__item">
1632       <a href="../../../../migration/wsc30/package/" class="md-nav__link">
1633         Package Components
1634       </a>
1635     </li>
1636
1637
1638
1639         </ul>
1640       </nav>
1641     </li>
1642
1643
1644
1645
1646
1647
1648
1649
1650     <li class="md-nav__item md-nav__item--nested">
1651
1652
1653         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1654
1655       <label class="md-nav__link" for="__nav_6_5">
1656         Migrating from WCF 2.1
1657         <span class="md-nav__icon md-icon"></span>
1658       </label>
1659       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1660         <label class="md-nav__title" for="__nav_6_5">
1661           <span class="md-nav__icon md-icon"></span>
1662           Migrating from WCF 2.1
1663         </label>
1664         <ul class="md-nav__list" data-md-scrollfix>
1665
1666
1667
1668
1669
1670     <li class="md-nav__item">
1671       <a href="../../../../migration/wcf21/php/" class="md-nav__link">
1672         PHP API
1673       </a>
1674     </li>
1675
1676
1677
1678
1679
1680
1681
1682     <li class="md-nav__item">
1683       <a href="../../../../migration/wcf21/templates/" class="md-nav__link">
1684         Templates
1685       </a>
1686     </li>
1687
1688
1689
1690
1691
1692
1693
1694     <li class="md-nav__item">
1695       <a href="../../../../migration/wcf21/css/" class="md-nav__link">
1696         CSS
1697       </a>
1698     </li>
1699
1700
1701
1702
1703
1704
1705
1706     <li class="md-nav__item">
1707       <a href="../../../../migration/wcf21/package/" class="md-nav__link">
1708         Package Components
1709       </a>
1710     </li>
1711
1712
1713
1714         </ul>
1715       </nav>
1716     </li>
1717
1718
1719
1720         </ul>
1721       </nav>
1722     </li>
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732
1733
1734     <li class="md-nav__item md-nav__item--nested">
1735
1736
1737         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1738
1739       <label class="md-nav__link" for="__nav_7">
1740         Tutorials
1741         <span class="md-nav__icon md-icon"></span>
1742       </label>
1743       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1744         <label class="md-nav__title" for="__nav_7">
1745           <span class="md-nav__icon md-icon"></span>
1746           Tutorials
1747         </label>
1748         <ul class="md-nav__list" data-md-scrollfix>
1749
1750
1751
1752
1753
1754
1755     <li class="md-nav__item md-nav__item--nested">
1756
1757
1758         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1759
1760       <label class="md-nav__link" for="__nav_7_1">
1761         Tutorial Series
1762         <span class="md-nav__icon md-icon"></span>
1763       </label>
1764       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1765         <label class="md-nav__title" for="__nav_7_1">
1766           <span class="md-nav__icon md-icon"></span>
1767           Tutorial Series
1768         </label>
1769         <ul class="md-nav__list" data-md-scrollfix>
1770
1771
1772
1773
1774
1775     <li class="md-nav__item">
1776       <a href="../../../../tutorial/series/overview/" class="md-nav__link">
1777         Overview
1778       </a>
1779     </li>
1780
1781
1782
1783
1784
1785
1786
1787     <li class="md-nav__item">
1788       <a href="../../../../tutorial/series/part_1/" class="md-nav__link">
1789         Part 1
1790       </a>
1791     </li>
1792
1793
1794
1795
1796
1797
1798
1799     <li class="md-nav__item">
1800       <a href="../../../../tutorial/series/part_2/" class="md-nav__link">
1801         Part 2
1802       </a>
1803     </li>
1804
1805
1806
1807
1808
1809
1810
1811     <li class="md-nav__item">
1812       <a href="../../../../tutorial/series/part_3/" class="md-nav__link">
1813         Part 3
1814       </a>
1815     </li>
1816
1817
1818
1819         </ul>
1820       </nav>
1821     </li>
1822
1823
1824
1825         </ul>
1826       </nav>
1827     </li>
1828
1829
1830
1831   </ul>
1832 </nav>
1833                   </div>
1834                 </div>
1835               </div>
1836
1837
1838
1839               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1840                 <div class="md-sidebar__scrollwrap">
1841                   <div class="md-sidebar__inner">
1842
1843 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1844
1845
1846
1847
1848
1849     <label class="md-nav__title" for="__toc">
1850       <span class="md-nav__icon md-icon"></span>
1851       Table of contents
1852     </label>
1853     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1854
1855         <li class="md-nav__item">
1856   <a href="#advantages-of-form-builder" class="md-nav__link">
1857     Advantages of Form Builder
1858   </a>
1859
1860 </li>
1861
1862         <li class="md-nav__item">
1863   <a href="#form-builder-components" class="md-nav__link">
1864     Form Builder Components
1865   </a>
1866
1867 </li>
1868
1869         <li class="md-nav__item">
1870   <a href="#abstractformbuilderform" class="md-nav__link">
1871     AbstractFormBuilderForm
1872   </a>
1873
1874 </li>
1875
1876         <li class="md-nav__item">
1877   <a href="#dialogformdocument" class="md-nav__link">
1878     DialogFormDocument
1879   </a>
1880
1881 </li>
1882
1883     </ul>
1884
1885 </nav>
1886                   </div>
1887                 </div>
1888               </div>
1889
1890
1891           <div class="md-content" data-md-component="content">
1892             <article class="md-content__inner md-typeset">
1893
1894
1895                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/php/api/form_builder/overview.md" title="Edit this page" class="md-content__button md-icon">
1896                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
1897                   </a>
1898
1899
1900                 <h1 id="form-builder">Form Builder<a class="headerlink" href="#form-builder" title="Permanent link">#</a></h1>
1901 <div class="admonition info">
1902 <p class="admonition-title">Form builder is only available since WoltLab Suite Core 5.2.</p>
1903 </div>
1904 <div class="admonition info">
1905 <p class="admonition-title">The <a href="../../../../migration/wsc31/form-builder/">migration guide for WoltLab Suite Core 5.2</a> provides some examples of how to migrate existing forms to form builder that can also help in understanding form builder if the old way of creating forms is familiar.</p>
1906 </div>
1907 <h2 id="advantages-of-form-builder">Advantages of Form Builder<a class="headerlink" href="#advantages-of-form-builder" title="Permanent link">#</a></h2>
1908 <p>WoltLab Suite 5.2 introduces a new powerful way of creating forms: form builder.
1909 Before taking a closer look at form builder, let us recap how forms are created in previous versions:
1910 In general, for each form field, there is a corresponding property of the form's PHP class whose value has to be read from the request data, validated, and passed to the database object action to store the value in a database table.
1911 When editing an object, the property's value has to be set using the value of the corresponding property of the edited object.
1912 In the form's template, you have to write the <code>&lt;form&gt;</code> element with all of its children: the <code>&lt;section&gt;</code> elements, the <code>&lt;dl&gt;</code> elements, and, of course, the form fields themselves.
1913 In summary, this way of creating forms creates much duplicate or at least very similar code and makes it very time consuming if the structure of forms in general or a specific type of form field has to be changed.</p>
1914 <p>Form builder, in contrast, relies on PHP objects representing each component of the form, from the form itself down to each form field.
1915 This approach makes creating forms as easy as creating some PHP objects, populating them with all the relevant data, and one line of code in the template to print the form.</p>
1916 <h2 id="form-builder-components">Form Builder Components<a class="headerlink" href="#form-builder-components" title="Permanent link">#</a></h2>
1917 <p>Form builder consists of several components that are presented on the following pages:</p>
1918 <ol>
1919 <li><a href="../structure/">Structure of form builder</a></li>
1920 <li><a href="../validation_data/">Form validation and form data</a></li>
1921 <li><a href="../dependencies/">Form node dependencies</a></li>
1922 </ol>
1923 <div class="admonition warning">
1924 <p class="admonition-title">In general, form builder provides default implementation of interfaces by providing either abstract classes or traits. It is expected that the interfaces are always implemented using these abstract classes and traits! This way, if new methods are added to the interfaces, default implementations can be provided by the abstract classes and traits without causing backwards compatibility problems.</p>
1925 </div>
1926 <h2 id="abstractformbuilderform"><code>AbstractFormBuilderForm</code><a class="headerlink" href="#abstractformbuilderform" title="Permanent link">#</a></h2>
1927 <p>To make using form builder easier, <code>AbstractFormBuilderForm</code> extends <code>AbstractForm</code> and provides most of the code needed to set up a form (of course without specific fields, those have to be added by the concrete form class), like reading and validating form values and using a database object action to use the form data to create or update a database object.</p>
1928 <p>In addition to the existing methods inherited by <code>AbstractForm</code>, <code>AbstractFormBuilderForm</code> provides the following methods:</p>
1929 <ul>
1930 <li>
1931 <p><code>buildForm()</code> builds the form in the following steps:</p>
1932 </li>
1933 <li>
1934 <p>Call <code>AbtractFormBuilderForm::createForm()</code> to create the <code>IFormDocument</code> object and add the form fields.</p>
1935 </li>
1936 <li>Call <code>IFormDocument::build()</code> to build the form.</li>
1937 <li>Call <code>AbtractFormBuilderForm::finalizeForm()</code> to finalize the form like adding dependencies.</li>
1938 </ul>
1939 <p>Additionally, between steps 1 and 2 and after step 3, the method provides two events, <code>createForm</code> and <code>buildForm</code> to allow plugins to register event listeners to execute additional code at the right point in time.
1940 - <code>createForm()</code> creates the <code>FormDocument</code> object and sets the form mode.
1941   Classes extending <code>AbstractFormBuilderForm</code> have to override this method (and call <code>parent::createForm()</code> as the first line in the overridden method) to add concrete form containers and form fields to the bare form document.
1942 - <code>finalizeForm()</code> is called after the form has been built and the complete form hierarchy has been established.
1943   This method should be overridden to add dependencies, for example.
1944 - <code>setFormAction()</code> is called at the end of <code>readData()</code> and sets the form document’s action based on the controller class name and whether an object is currently edited.
1945 - If an object is edited, at the beginning of <code>readData()</code>, <code>setFormObjectData()</code> is called which calls <code>IFormDocument::loadValuesFromObject()</code>.
1946   If values need to be loaded from additional sources, this method should be used for that.</p>
1947 <p><code>AbstractFormBuilderForm</code> also provides the following (public) properties:</p>
1948 <ul>
1949 <li><code>$form</code> contains the <code>IFormDocument</code> object created in <code>createForm()</code>.</li>
1950 <li><code>$formAction</code> is either <code>create</code> (default) or <code>edit</code> and handles which method of the database object is called by default (<code>create</code> is called for <code>$formAction = 'create'</code> and <code>update</code> is called for <code>$formAction = 'edit'</code>) and is used to set the value of the <code>action</code> template variable.</li>
1951 <li><code>$formObject</code> contains the <code>IStorableObject</code> if the form is used to edit an existing object.
1952   For forms used to create objects, <code>$formObject</code> is always <code>null</code>.
1953   Edit forms have to manually identify the edited object based on the request data and set the value of <code>$formObject</code>. </li>
1954 <li><code>$objectActionName</code> can be used to set an alternative action to be executed by the database object action that deviates from the default action determined by the value of <code>$formAction</code>.</li>
1955 <li><code>$objectActionClass</code> is the name of the database object action class that is used to create or update the database object.</li>
1956 </ul>
1957 <h2 id="dialogformdocument"><code>DialogFormDocument</code><a class="headerlink" href="#dialogformdocument" title="Permanent link">#</a></h2>
1958 <p>Form builder forms can also be used in dialogs.
1959 For such forms, <code>DialogFormDocument</code> should be used which provides the additional methods <code>cancelable($cancelable = true)</code> and <code>isCancelable()</code> to set and check if the dialog can be canceled.
1960 If a dialog form can be canceled, a cancel button is added.</p>
1961 <p>If the dialog form is fetched via an AJAX request, <code>IFormDocument::ajax()</code> has to be called.
1962 AJAX forms are registered with <code>WoltLabSuite/Core/Form/Builder/Manager</code> which also supports getting all of the data of a form via the <code>getData(formId)</code> function.
1963 The <code>getData()</code> function relies on all form fields creating and registering a <code>WoltLabSuite/Core/Form/Builder/Field/Field</code> object that provides the data of a specific field.</p>
1964 <p>To make it as easy as possible to work with AJAX forms in dialogs, <code>WoltLabSuite/Core/Form/Builder/Dialog</code> (abbreviated as <code>FormBuilderDialog</code> from now on) should generally be used instead of <code>WoltLabSuite/Core/Form/Builder/Manager</code> directly.
1965 The constructor of <code>FormBuilderDialog</code> expects the following parameters:</p>
1966 <ul>
1967 <li><code>dialogId</code>: id of the dialog element</li>
1968 <li><code>className</code>: PHP class used to get the form dialog (and save the data if <code>options.submitActionName</code> is set)</li>
1969 <li><code>actionName</code>: name of the action/method of <code>className</code> that returns the dialog; the method is expected to return an array with <code>formId</code> containg the id of the returned form and <code>dialog</code> containing the rendered form dialog</li>
1970 <li><code>options</code>: additional options:</li>
1971 <li><code>actionParameters</code> (default: empty): additional parameters sent during AJAX requests</li>
1972 <li><code>destroyOnClose</code> (default: <code>false</code>): if <code>true</code>, whenever the dialog is closed, the form is destroyed so that a new form is fetched if the dialog is opened again</li>
1973 <li><code>dialog</code>: additional dialog options used as <code>options</code> during dialog setup</li>
1974 <li><code>onSubmit</code>: callback when the form is submitted (takes precedence over <code>submitActionName</code>)</li>
1975 <li><code>submitActionName</code> (default: not set): name of the action/method of <code>className</code> called when the form is submitted</li>
1976 </ul>
1977 <p>The three public functions of <code>FormBuilderDialog</code> are:</p>
1978 <ul>
1979 <li><code>destroy()</code> destroys the dialog, the form, and all of the form fields.</li>
1980 <li><code>getData()</code> returns a Promise that returns the form data.</li>
1981 <li><code>open()</code> opens the dialog.</li>
1982 </ul>
1983 <p>Example:</p>
1984 <div class="highlight"><pre><span></span><code><span class="nx">require</span><span class="p">([</span><span class="s1">&#39;WoltLabSuite/Core/Form/Builder/Dialog&#39;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">FormBuilderDialog</span><span class="p">)</span> <span class="p">{</span>
1985     <span class="kd">var</span> <span class="nx">dialog</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormBuilderDialog</span><span class="p">(</span>
1986         <span class="s1">&#39;testDialog&#39;</span><span class="p">,</span>
1987         <span class="s1">&#39;wcf\\data\\test\\TestAction&#39;</span><span class="p">,</span>
1988         <span class="s1">&#39;getDialog&#39;</span><span class="p">,</span>
1989         <span class="p">{</span>
1990             <span class="nx">destroyOnClose</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
1991             <span class="nx">dialog</span><span class="o">:</span> <span class="p">{</span>
1992                 <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Test Dialog&#39;</span>
1993             <span class="p">},</span>
1994             <span class="nx">submitActionName</span><span class="o">:</span> <span class="s1">&#39;saveDialog&#39;</span>
1995         <span class="p">}</span>
1996     <span class="p">);</span>
1997
1998     <span class="nx">elById</span><span class="p">(</span><span class="s1">&#39;testDialogButton&#39;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
1999         <span class="nx">dialog</span><span class="p">.</span><span class="nx">open</span><span class="p">();</span>
2000     <span class="p">});</span>
2001 <span class="p">});</span>
2002 </code></pre></div>
2003
2004
2005
2006
2007 <hr>
2008 <div class="md-source-date">
2009   <small>
2010
2011       Last update: 2021-01-15
2012
2013   </small>
2014 </div>
2015
2016
2017
2018
2019
2020
2021
2022
2023             </article>
2024           </div>
2025         </div>
2026
2027       </main>
2028
2029
2030 <footer class="md-footer">
2031
2032     <nav class="md-footer__inner md-grid" aria-label="Footer">
2033
2034         <a href="../../events/" class="md-footer__link md-footer__link--prev" rel="prev">
2035           <div class="md-footer__button md-icon">
2036             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
2037           </div>
2038           <div class="md-footer__title">
2039             <div class="md-ellipsis">
2040               <span class="md-footer__direction">
2041                 Previous
2042               </span>
2043               Events
2044             </div>
2045           </div>
2046         </a>
2047
2048
2049         <a href="../structure/" class="md-footer__link md-footer__link--next" rel="next">
2050           <div class="md-footer__title">
2051             <div class="md-ellipsis">
2052               <span class="md-footer__direction">
2053                 Next
2054               </span>
2055               Structure
2056             </div>
2057           </div>
2058           <div class="md-footer__button md-icon">
2059             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2060           </div>
2061         </a>
2062
2063     </nav>
2064
2065   <div class="md-footer-meta md-typeset">
2066     <div class="md-footer-meta__inner md-grid">
2067       <div class="md-footer-copyright">
2068
2069           <div class="md-footer-copyright__highlight">
2070             Copyright © 2020 WoltLab GmbH
2071           </div>
2072
2073         Made with
2074         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2075           Material for MkDocs
2076         </a>
2077
2078       </div>
2079       <div class="md-footer-copyright">
2080         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2081         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2082 </div>
2083     </div>
2084   </div>
2085 </footer>
2086
2087     </div>
2088     <div class="md-dialog" data-md-component="dialog">
2089       <div class="md-dialog__inner md-typeset"></div>
2090     </div>
2091     <script id="__config" type="application/json">{"base": "../../../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../../../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2092
2093
2094       <script src="../../../../assets/javascripts/bundle.d892486b.min.js"></script>
2095
2096
2097   </body>
2098 </html>