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