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