5.3/php_api_form_builder.html

   1 <!DOCTYPE html>
   2 <head>
   3     <meta charset="utf-8">
   4 <meta http-equiv="X-UA-Compatible" content="IE=edge">
   5 <meta name="viewport" content="width=device-width, initial-scale=1">
   6 <meta name="description" content="">
   7 <meta name="keywords" content=" ">
   8 <title>Form Builder | WoltLab Suite 5.3 Documentation</title>
   9
  10 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/syntax.css">
  11 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600">
  12 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/font-awesome.min.css">
  13 <!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
  14 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/modern-business.css">
  15 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/lavish-bootstrap.css">
  16 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/customstyles.css">
  17 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/theme-blue.css?v=3">
  18
  19 <script src="https://docs.woltlab.com/5.3/js/jquery.min.js"></script>
  20 <script src="https://docs.woltlab.com/5.3/js/jquery.cookie.min.js"></script>
  21 <script src="https://docs.woltlab.com/5.3/js/jquery.navgoco.min.js"></script>
  22 <script src="https://docs.woltlab.com/5.3/js/bootstrap.min.js"></script>
  23 <script src="https://docs.woltlab.com/5.3/js/anchor.min.js"></script>
  24 <script src="https://docs.woltlab.com/5.3/js/toc.js"></script>
  25 <script src="https://docs.woltlab.com/5.3/js/customscripts.js"></script>
  26
  27 <link rel="shortcut icon" href="https://docs.woltlab.com/5.3/images/favicon.ico">
  28
  29 <link rel="alternate" type="application/rss+xml" title="woltlab.github.io" href="https://docs.woltlab.com/5.3feed.xml">
  30
  31     <script>
  32         $(document).ready(function() {
  33             // Initialize navgoco with default options
  34             $("#mysidebar").navgoco({
  35                 caretHtml: '',
  36                 accordion: true,
  37                 openClass: 'active', // open
  38                 save: false, // leave false or nav highlighting doesn't work right
  39                 cookie: {
  40                     name: 'navgoco',
  41                     expires: false,
  42                     path: '/'
  43                 },
  44                 slide: {
  45                     duration: 400,
  46                     easing: 'swing'
  47                 }
  48             });
  49
  50             $("#collapseAll").click(function(e) {
  51                 e.preventDefault();
  52                 $("#mysidebar").navgoco('toggle', false);
  53             });
  54
  55             $("#expandAll").click(function(e) {
  56                 e.preventDefault();
  57                 $("#mysidebar").navgoco('toggle', true);
  58             });
  59
  60         });
  61
  62     </script>
  63     <script>
  64         $(function () {
  65             $('[data-toggle="tooltip"]').tooltip()
  66         })
  67     </script>
  68
  69
  70 </head>
  71 <body>
  72   <!-- Navigation -->
  73 <nav class="navbar navbar-inverse navbar-fixed-top">
  74     <div class="container topnavlinks">
  75         <div class="navbar-header">
  76             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  77                 <span class="sr-only">Toggle navigation</span>
  78                 <span class="icon-bar"></span>
  79                 <span class="icon-bar"></span>
  80                 <span class="icon-bar"></span>
  81             </button>
  82             <a class="fa fa-home fa-lg navbar-brand" href="index.html">&nbsp;<span class="projectTitle"> WoltLab Suite 5.3 Documentation</span></a>
  83         </div>
  84         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  85             <ul class="nav navbar-nav navbar-right">
  86                 <!-- entries without drop-downs appear here -->
  87
  88
  89
  90                 <li><a href="https://www.woltlab.com" target="_blank">woltlab.com</a></li>
  91
  92
  93
  94
  95
  96                 <li><a href="https://github.com/WoltLab/WCF/" target="_blank">Code on github.com</a></li>
  97
  98
  99
 100                 <!-- entries with drop-downs appear here -->
 101                 <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
 102
 103
 104                 <!--comment out this block if you want to hide search-->
 105                 <li>
 106                     <!--start search-->
 107                     <div id="search-demo-container">
 108                         <input type="text" id="search-input" placeholder="search...">
 109                         <ul id="results-container"></ul>
 110                     </div>
 111                     <script src="https://docs.woltlab.com/5.3/js/jekyll-search.js" type="text/javascript"></script>
 112                     <script type="text/javascript">
 113                             SimpleJekyllSearch.init({
 114                                 searchInput: document.getElementById('search-input'),
 115                                 resultsContainer: document.getElementById('results-container'),
 116                                 dataSource: 'https://docs.woltlab.com/5.3/search.json',
 117                                 searchResultTemplate: '<li><a href="{url}" title="Form Builder">{title}</a></li>',
 118                     noResultsText: 'No results found.',
 119                             limit: 10,
 120                             fuzzy: true,
 121                     })
 122                     </script>
 123                     <!--end search-->
 124                 </li>
 125             </ul>
 126         </div>
 127         </div>
 128         <!-- /.container -->
 129 </nav>
 130
 131
 132   <div class="container">
 133     <div class="col-lg-12">&nbsp;</div>
 134
 135     <div class="row">
 136       <div class="col-md-3">
 137
 138
 139
 140 <ul id="mysidebar" class="nav">
 141     <li class="sidebarTitle">WoltLab Suite 5.3</li>
 142
 143
 144
 145             <li>
 146                 <a href="#">Getting Started</a>
 147                 <ul>
 148
 149
 150
 151
 152                                 <li data-identifier="index"><a href="index.html">Introduction</a></li>
 153
 154
 155
 156
 157
 158
 159
 160
 161                                 <li data-identifier="getting-started_quick-start"><a href="getting-started_quick-start.html">Quick Start</a></li>
 162
 163
 164
 165
 166
 167                 </ul>
 168             </li>
 169
 170             <li>
 171                 <a href="#">PHP API</a>
 172                 <ul>
 173
 174
 175
 176
 177                                 <li data-identifier="php_pages"><a href="php_pages.html">Pages</a></li>
 178
 179
 180
 181
 182
 183
 184
 185
 186                                 <li data-identifier="php_database-objects"><a href="php_database-objects.html">Database Objects</a></li>
 187
 188
 189
 190
 191
 192
 193
 194
 195                                 <li data-identifier="php_database-access"><a href="php_database-access.html">Database Access</a></li>
 196
 197
 198
 199
 200
 201
 202
 203
 204                                 <li data-identifier="php_exceptions"><a href="php_exceptions.html">Exceptions</a></li>
 205
 206
 207
 208
 209
 210
 211
 212
 213                             <li class="subfolders">
 214                                 <a href="#">API</a>
 215                                 <ul>
 216
 217
 218
 219                                             <li data-identifier="php_api_caches"><a href="php_api_caches.html">Caches</a></li>
 220
 221
 222
 223
 224                                             <li data-identifier="php_api_comments"><a href="php_api_comments.html">Comments</a></li>
 225
 226
 227
 228
 229                                             <li data-identifier="php_api_cronjobs"><a href="php_api_cronjobs.html">Cronjobs</a></li>
 230
 231
 232
 233
 234                                             <li data-identifier="php_api_events"><a href="php_api_events.html">Events</a></li>
 235
 236
 237
 238
 239                                             <li class="active" data-identifier="php_api_form_builder"><a href="php_api_form_builder.html">Form Builder</a></li>
 240
 241
 242
 243
 244                                             <li data-identifier="php_api_package_installation_plugins"><a href="php_api_package_installation_plugins.html">Package Installation Plugins</a></li>
 245
 246
 247
 248
 249                                             <li data-identifier="php_api_user_activity_points"><a href="php_api_user_activity_points.html">User Activity Points</a></li>
 250
 251
 252
 253
 254                                             <li data-identifier="php_api_user_notifications"><a href="php_api_user_notifications.html">User Notifications</a></li>
 255
 256
 257
 258
 259                                             <li data-identifier="php_api_sitemaps"><a href="php_api_sitemaps.html">Sitemaps</a></li>
 260
 261
 262                                 </ul>
 263                             </li>
 264
 265
 266
 267
 268
 269                                 <li data-identifier="php_code-style"><a href="php_code-style.html">Code Style</a></li>
 270
 271
 272
 273
 274
 275
 276
 277
 278                                 <li data-identifier="php_apps"><a href="php_apps.html">Apps</a></li>
 279
 280
 281
 282
 283
 284
 285
 286
 287                                 <li data-identifier="php_gdpr"><a href="php_gdpr.html">GDPR</a></li>
 288
 289
 290
 291
 292
 293                 </ul>
 294             </li>
 295
 296             <li>
 297                 <a href="#">Languages, Templates & CSS</a>
 298                 <ul>
 299
 300
 301
 302
 303                                 <li data-identifier="view_languages"><a href="view_languages.html">Languages</a></li>
 304
 305
 306
 307
 308
 309
 310
 311
 312                                 <li data-identifier="view_templates"><a href="view_templates.html">Templates</a></li>
 313
 314
 315
 316
 317
 318
 319
 320
 321                                 <li data-identifier="view_css"><a href="view_css.html">CSS</a></li>
 322
 323
 324
 325
 326
 327                 </ul>
 328             </li>
 329
 330             <li>
 331                 <a href="#">JavaScript API</a>
 332                 <ul>
 333
 334
 335
 336
 337                                 <li data-identifier="javascript_general-usage"><a href="javascript_general-usage.html">General Usage</a></li>
 338
 339
 340
 341
 342
 343
 344
 345
 346                             <li class="subfolders">
 347                                 <a href="#">New API</a>
 348                                 <ul>
 349
 350
 351
 352                                             <li data-identifier="javascript_new-api_writing-a-module"><a href="javascript_new-api_writing-a-module.html">Writing a module</a></li>
 353
 354
 355
 356
 357                                             <li data-identifier="javascript_new-api_data-structures"><a href="javascript_new-api_data-structures.html">Data Structures</a></li>
 358
 359
 360
 361
 362                                             <li data-identifier="javascript_new-api_core"><a href="javascript_new-api_core.html">Core Functions</a></li>
 363
 364
 365
 366
 367                                             <li data-identifier="javascript_new-api_dom"><a href="javascript_new-api_dom.html">DOM</a></li>
 368
 369
 370
 371
 372                                             <li data-identifier="javascript_new-api_events"><a href="javascript_new-api_events.html">Event Handling</a></li>
 373
 374
 375
 376
 377                                             <li data-identifier="javascript_new-api_ajax"><a href="javascript_new-api_ajax.html">Ajax</a></li>
 378
 379
 380
 381
 382                                             <li data-identifier="javascript_new-api_dialogs"><a href="javascript_new-api_dialogs.html">Dialogs</a></li>
 383
 384
 385
 386
 387                                             <li data-identifier="javascript_new-api_browser"><a href="javascript_new-api_browser.html">Browser and Screen Sizes</a></li>
 388
 389
 390
 391
 392                                             <li data-identifier="javascript_new-api_ui"><a href="javascript_new-api_ui.html">User Interface</a></li>
 393
 394
 395                                 </ul>
 396                             </li>
 397
 398
 399
 400
 401
 402                                 <li data-identifier="javascript_legacy-api"><a href="javascript_legacy-api.html">Legacy API</a></li>
 403
 404
 405
 406
 407
 408
 409
 410
 411                                 <li data-identifier="javascript_helper-functions"><a href="javascript_helper-functions.html">Helper Functions</a></li>
 412
 413
 414
 415
 416
 417
 418
 419
 420                                 <li data-identifier="javascript_code-snippets"><a href="javascript_code-snippets.html">Code Snippets</a></li>
 421
 422
 423
 424
 425
 426                 </ul>
 427             </li>
 428
 429             <li>
 430                 <a href="#">Package Components</a>
 431                 <ul>
 432
 433
 434
 435
 436                                 <li data-identifier="package_package-xml"><a href="package_package-xml.html">package.xml</a></li>
 437
 438
 439
 440
 441
 442
 443
 444
 445                                 <li data-identifier="package_pip"><a href="package_pip.html">PIPs</a></li>
 446
 447
 448
 449
 450
 451                 </ul>
 452             </li>
 453
 454             <li>
 455                 <a href="#">Migration</a>
 456                 <ul>
 457
 458
 459
 460
 461                             <li class="subfolders">
 462                                 <a href="#">Migrating from WSC 5.2</a>
 463                                 <ul>
 464
 465
 466
 467                                             <li data-identifier="migration_wsc-52_php"><a href="migration_wsc-52_php.html">PHP API</a></li>
 468
 469
 470
 471
 472                                             <li data-identifier="migration_wsc-52_templates"><a href="migration_wsc-52_templates.html">Templates and Languages</a></li>
 473
 474
 475
 476
 477                                             <li data-identifier="migration_wsc-52_libraries"><a href="migration_wsc-52_libraries.html">Third Party Libraries</a></li>
 478
 479
 480                                 </ul>
 481                             </li>
 482
 483                             <li class="subfolders">
 484                                 <a href="#">Migrating from WSC 3.1</a>
 485                                 <ul>
 486
 487
 488
 489                                             <li data-identifier="migration_wsc-31_php"><a href="migration_wsc-31_php.html">PHP API</a></li>
 490
 491
 492                                 </ul>
 493                             </li>
 494
 495                             <li class="subfolders">
 496                                 <a href="#">Migrating from WSC 3.0</a>
 497                                 <ul>
 498
 499
 500
 501                                             <li data-identifier="migration_wsc-30_php"><a href="migration_wsc-30_php.html">PHP API</a></li>
 502
 503
 504
 505
 506                                             <li data-identifier="migration_wsc-30_javascript"><a href="migration_wsc-30_javascript.html">JavaScript API</a></li>
 507
 508
 509
 510
 511                                             <li data-identifier="migration_wsc-30_templates"><a href="migration_wsc-30_templates.html">Templates</a></li>
 512
 513
 514
 515
 516                                             <li data-identifier="migration_wsc-30_css"><a href="migration_wsc-30_css.html">CSS</a></li>
 517
 518
 519
 520
 521                                             <li data-identifier="migration_wsc-30_package"><a href="migration_wsc-30_package.html">Package Components</a></li>
 522
 523
 524                                 </ul>
 525                             </li>
 526
 527                             <li class="subfolders">
 528                                 <a href="#">Migrating from WCF 2.1</a>
 529                                 <ul>
 530
 531
 532
 533                                             <li data-identifier="migration_wcf-21_php"><a href="migration_wcf-21_php.html">PHP API</a></li>
 534
 535
 536
 537
 538                                             <li data-identifier="migration_wcf-21_templates"><a href="migration_wcf-21_templates.html">Templates</a></li>
 539
 540
 541
 542
 543                                             <li data-identifier="migration_wcf-21_css"><a href="migration_wcf-21_css.html">CSS</a></li>
 544
 545
 546
 547
 548                                             <li data-identifier="migration_wcf-21_package"><a href="migration_wcf-21_package.html">Package Components</a></li>
 549
 550
 551                                 </ul>
 552                             </li>
 553
 554
 555                 </ul>
 556             </li>
 557
 558             <li>
 559                 <a href="#">Tutorials</a>
 560                 <ul>
 561
 562
 563
 564
 565                                 <li data-identifier="tutorial_tutorial-series"><a href="tutorial_tutorial-series.html">Tutorial Series</a></li>
 566
 567
 568
 569
 570
 571                 </ul>
 572             </li>
 573
 574
 575 </ul>
 576
 577 <script>
 578 (function() {
 579     var sidebar = $('#mysidebar');
 580     var item = sidebar.find('.active');
 581     if (item.length === 0) {
 582         var parent = '';
 583         if (parent) {
 584             sidebar.find('li[data-identifier="' + parent + '"]').addClass('active');
 585         }
 586     }
 587
 588     sidebar.find(".active").parents('li').toggleClass("active");
 589 })();
 590 </script>
 591
 592       </div>
 593
 594       <div class="col-md-9">
 595         <div class="post-header">
 596    <h1 class="post-title-main">Form Builder</h1>
 597 </div>
 598
 599
 600
 601 <div class="post-content">
 602
 603
 604
 605
 606
 607 <!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
 608 <script>
 609 $( document ).ready(function() {
 610   // Handler for .ready() called.
 611
 612 $('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });
 613
 614 /* this offset helps account for the space taken up by the floating toolbar. */
 615 $('#toc').on('click', 'a', function() {
 616   var target = $(this.getAttribute('href'))
 617     , scroll_target = target.offset().top
 618
 619   $(window).scrollTop(scroll_target - 10);
 620   return false
 621 })
 622
 623 });
 624 </script>
 625
 626 <div id="toc"></div>
 627
 628
 629
 630   <div class="bs-callout bs-callout-info">Form builder is only available since WoltLab Suite Core 5.2.</div>
 631
 632 <div class="bs-callout bs-callout-info">The <a href="migration_wsc-31_form-builder.html">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.</div>
 633
 634 <h2 id="advantages-of-form-builder">Advantages of Form Builder</h2>
 635
 636 <p>WoltLab Suite 5.2 introduces a new powerful way of creating forms: form builder.
 637 Before taking a closer look at form builder, let us recap how forms are created in previous versions:
 638 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.
 639 When editing an object, the property’s value has to be set using the value of the corresponding property of the edited object.
 640 In the form’s template, you have to write the <code class="language-plaintext highlighter-rouge">&lt;form&gt;</code> element with all of its children: the <code class="language-plaintext highlighter-rouge">&lt;section&gt;</code> elements, the <code class="language-plaintext highlighter-rouge">&lt;dl&gt;</code> elements, and, of course, the form fields themselves.
 641 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>
 642
 643 <p>Form builder, in contrast, relies on PHP objects representing each component of the form, from the form itself down to each form field.
 644 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>
 645
 646 <h2 id="form-builder-components">Form Builder Components</h2>
 647
 648 <p>Form builder consists of several components that are presented on the following pages:</p>
 649
 650 <ol>
 651   <li><a href="php_api_form_builder-structure.html">Structure of form builder</a></li>
 652   <li><a href="php_api_form_builder-validation_data.html">Form validation and form data</a></li>
 653   <li><a href="php_api_form_builder-dependencies.html">Form node dependencies</a></li>
 654 </ol>
 655
 656 <div class="bs-callout bs-callout-warning">In general, form builder provides default implementation of interfaces by providing either abstract classes or traits.
 657   It is expected that the interfaces are always implemented using these abstract classes and traits!
 658   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.</div>
 659
 660 <h2 id="abstractformbuilderform"><code class="language-plaintext highlighter-rouge">AbstractFormBuilderForm</code></h2>
 661
 662 <p>To make using form builder easier, <code class="language-plaintext highlighter-rouge">AbstractFormBuilderForm</code> extends <code class="language-plaintext highlighter-rouge">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>
 663
 664 <p>In addition to the existing methods inherited by <code class="language-plaintext highlighter-rouge">AbstractForm</code>, <code class="language-plaintext highlighter-rouge">AbstractFormBuilderForm</code> provides the following methods:</p>
 665
 666 <ul>
 667   <li>
 668     <p><code class="language-plaintext highlighter-rouge">buildForm()</code> builds the form in the following steps:</p>
 669
 670     <ol>
 671       <li>Call <code class="language-plaintext highlighter-rouge">AbtractFormBuilderForm::createForm()</code> to create the <code class="language-plaintext highlighter-rouge">IFormDocument</code> object and add the form fields.</li>
 672       <li>Call <code class="language-plaintext highlighter-rouge">IFormDocument::build()</code> to build the form.</li>
 673       <li>Call <code class="language-plaintext highlighter-rouge">AbtractFormBuilderForm::finalizeForm()</code> to finalize the form like adding dependencies.</li>
 674     </ol>
 675
 676     <p>Additionally, between steps 1 and 2 and after step 3, the method provides two events, <code class="language-plaintext highlighter-rouge">createForm</code> and <code class="language-plaintext highlighter-rouge">buildForm</code> to allow plugins to register event listeners to execute additional code at the right point in time.</p>
 677   </li>
 678   <li><code class="language-plaintext highlighter-rouge">createForm()</code> creates the <code class="language-plaintext highlighter-rouge">FormDocument</code> object and sets the form mode.
 679 Classes extending <code class="language-plaintext highlighter-rouge">AbstractFormBuilderForm</code> have to override this method (and call <code class="language-plaintext highlighter-rouge">parent::createForm()</code> as the first line in the overridden method) to add concrete form containers and form fields to the bare form document.</li>
 680   <li><code class="language-plaintext highlighter-rouge">finalizeForm()</code> is called after the form has been built and the complete form hierarchy has been established.
 681 This method should be overridden to add dependencies, for example.</li>
 682   <li><code class="language-plaintext highlighter-rouge">setFormAction()</code> is called at the end of <code class="language-plaintext highlighter-rouge">readData()</code> and sets the form document’s action based on the controller class name and whether an object is currently edited.</li>
 683   <li>If an object is edited, at the beginning of <code class="language-plaintext highlighter-rouge">readData()</code>, <code class="language-plaintext highlighter-rouge">setFormObjectData()</code> is called which calls <code class="language-plaintext highlighter-rouge">IFormDocument::loadValuesFromObject()</code>.
 684 If values need to be loaded from additional sources, this method should be used for that.</li>
 685 </ul>
 686
 687 <p><code class="language-plaintext highlighter-rouge">AbstractFormBuilderForm</code> also provides the following (public) properties:</p>
 688
 689 <ul>
 690   <li><code class="language-plaintext highlighter-rouge">$form</code> contains the <code class="language-plaintext highlighter-rouge">IFormDocument</code> object created in <code class="language-plaintext highlighter-rouge">createForm()</code>.</li>
 691   <li><code class="language-plaintext highlighter-rouge">$formAction</code> is either <code class="language-plaintext highlighter-rouge">create</code> (default) or <code class="language-plaintext highlighter-rouge">edit</code> and handles which method of the database object is called by default (<code class="language-plaintext highlighter-rouge">create</code> is called for <code class="language-plaintext highlighter-rouge">$formAction = 'create'</code> and <code class="language-plaintext highlighter-rouge">update</code> is called for <code class="language-plaintext highlighter-rouge">$formAction = 'edit'</code>) and is used to set the value of the <code class="language-plaintext highlighter-rouge">action</code> template variable.</li>
 692   <li><code class="language-plaintext highlighter-rouge">$formObject</code> contains the <code class="language-plaintext highlighter-rouge">IStorableObject</code> if the form is used to edit an existing object.
 693 For forms used to create objects, <code class="language-plaintext highlighter-rouge">$formObject</code> is always <code class="language-plaintext highlighter-rouge">null</code>.
 694 Edit forms have to manually identify the edited object based on the request data and set the value of <code class="language-plaintext highlighter-rouge">$formObject</code>.</li>
 695   <li><code class="language-plaintext highlighter-rouge">$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 class="language-plaintext highlighter-rouge">$formAction</code>.</li>
 696   <li><code class="language-plaintext highlighter-rouge">$objectActionClass</code> is the name of the database object action class that is used to create or update the database object.</li>
 697 </ul>
 698
 699 <h2 id="dialogformdocument"><code class="language-plaintext highlighter-rouge">DialogFormDocument</code></h2>
 700
 701 <p>Form builder forms can also be used in dialogs.
 702 For such forms, <code class="language-plaintext highlighter-rouge">DialogFormDocument</code> should be used which provides the additional methods <code class="language-plaintext highlighter-rouge">cancelable($cancelable = true)</code> and <code class="language-plaintext highlighter-rouge">isCancelable()</code> to set and check if the dialog can be canceled.
 703 If a dialog form can be canceled, a cancel button is added.</p>
 704
 705 <p>If the dialog form is fetched via an AJAX request, <code class="language-plaintext highlighter-rouge">IFormDocument::ajax()</code> has to be called.
 706 AJAX forms are registered with <code class="language-plaintext highlighter-rouge">WoltLabSuite/Core/Form/Builder/Manager</code> which also supports getting all of the data of a form via the <code class="language-plaintext highlighter-rouge">getData(formId)</code> function.
 707 The <code class="language-plaintext highlighter-rouge">getData()</code> function relies on all form fields creating and registering a <code class="language-plaintext highlighter-rouge">WoltLabSuite/Core/Form/Builder/Field/Field</code> object that provides the data of a specific field.</p>
 708
 709 <p>To make it as easy as possible to work with AJAX forms in dialogs, <code class="language-plaintext highlighter-rouge">WoltLabSuite/Core/Form/Builder/Dialog</code> (abbreviated as <code class="language-plaintext highlighter-rouge">FormBuilderDialog</code> from now on) should generally be used instead of <code class="language-plaintext highlighter-rouge">WoltLabSuite/Core/Form/Builder/Manager</code> directly.
 710 The constructor of <code class="language-plaintext highlighter-rouge">FormBuilderDialog</code> expects the following parameters:</p>
 711
 712 <ul>
 713   <li><code class="language-plaintext highlighter-rouge">dialogId</code>: id of the dialog element</li>
 714   <li><code class="language-plaintext highlighter-rouge">className</code>: PHP class used to get the form dialog (and save the data if <code class="language-plaintext highlighter-rouge">options.submitActionName</code> is set)</li>
 715   <li><code class="language-plaintext highlighter-rouge">actionName</code>: name of the action/method of <code class="language-plaintext highlighter-rouge">className</code> that returns the dialog; the method is expected to return an array with <code class="language-plaintext highlighter-rouge">formId</code> containg the id of the returned form and <code class="language-plaintext highlighter-rouge">dialog</code> containing the rendered form dialog</li>
 716   <li><code class="language-plaintext highlighter-rouge">options</code>: additional options:
 717     <ul>
 718       <li><code class="language-plaintext highlighter-rouge">actionParameters</code> (default: empty): additional parameters sent during AJAX requests</li>
 719       <li><code class="language-plaintext highlighter-rouge">destroyOnClose</code> (default: <code class="language-plaintext highlighter-rouge">false</code>): if <code class="language-plaintext highlighter-rouge">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>
 720       <li><code class="language-plaintext highlighter-rouge">dialog</code>: additional dialog options used as <code class="language-plaintext highlighter-rouge">options</code> during dialog setup</li>
 721       <li><code class="language-plaintext highlighter-rouge">onSubmit</code>: callback when the form is submitted (takes precedence over <code class="language-plaintext highlighter-rouge">submitActionName</code>)</li>
 722       <li><code class="language-plaintext highlighter-rouge">submitActionName</code> (default: not set): name of the action/method of <code class="language-plaintext highlighter-rouge">className</code> called when the form is submitted</li>
 723     </ul>
 724   </li>
 725 </ul>
 726
 727 <p>The three public functions of <code class="language-plaintext highlighter-rouge">FormBuilderDialog</code> are:</p>
 728
 729 <ul>
 730   <li><code class="language-plaintext highlighter-rouge">destroy()</code> destroys the dialog, the form, and all of the form fields.</li>
 731   <li><code class="language-plaintext highlighter-rouge">getData()</code> returns a Promise that returns the form data.</li>
 732   <li><code class="language-plaintext highlighter-rouge">open()</code> opens the dialog.</li>
 733 </ul>
 734
 735 <p>Example:</p>
 736
 737 <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">require</span><span class="p">([</span><span class="dl">'</span><span class="s1">WoltLabSuite/Core/Form/Builder/Dialog</span><span class="dl">'</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>
 738         <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>
 739                 <span class="dl">'</span><span class="s1">testDialog</span><span class="dl">'</span><span class="p">,</span>
 740                 <span class="dl">'</span><span class="s1">wcf</span><span class="se">\\</span><span class="s1">data</span><span class="se">\\</span><span class="s1">test</span><span class="se">\\</span><span class="s1">TestAction</span><span class="dl">'</span><span class="p">,</span>
 741                 <span class="dl">'</span><span class="s1">getDialog</span><span class="dl">'</span><span class="p">,</span>
 742                 <span class="p">{</span>
 743                         <span class="na">destroyOnClose</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
 744                         <span class="na">dialog</span><span class="p">:</span> <span class="p">{</span>
 745                                 <span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test Dialog</span><span class="dl">'</span>
 746                         <span class="p">},</span>
 747                         <span class="na">submitActionName</span><span class="p">:</span> <span class="dl">'</span><span class="s1">saveDialog</span><span class="dl">'</span>
 748                 <span class="p">}</span>
 749         <span class="p">);</span>
 750
 751         <span class="nx">elById</span><span class="p">(</span><span class="dl">'</span><span class="s1">testDialogButton</span><span class="dl">'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
 752                 <span class="nx">dialog</span><span class="p">.</span><span class="nx">open</span><span class="p">();</span>
 753         <span class="p">});</span>
 754 <span class="p">});</span>
 755 </code></pre></div></div>
 756
 757
 758     <div class="tags">
 759
 760     </div>
 761
 762
 763
 764 </div>
 765
 766       </div>
 767     </div>
 768   </div>
 769
 770   <div class="footerBox">
 771     <div class="container">
 772       <div class="footerBoxLeft">
 773
 774         <a target="_blank" href="https://github.com/woltlab/woltlab.github.io/blob/master/pages/php/api/php_api_form_builder.md" class="btn btn-default githubEditButton no_icon" role="button"><i class="fa fa-github fa-lg"></i> Edit on GitHub</a>
 775         <p>Site last generated: Mar 5, 2021</p>
 776       </div>
 777       <div class="footerBoxRight">
 778         <a class="no_icon" href="https://www.woltlab.com"><img src="https://docs.woltlab.com/5.3/images/woltlab-black.png" srcset="https://docs.woltlab.com/5.3/images/woltlab-black@2x.png 2x" height="40" width="204" alt=""></a>
 779       </div>
 780     </div>
 781   </div>
 782
 783   <div class="pageFooter">
 784     <div class="container">
 785       &copy; 2001 ‐ 2021 <a class="no_icon" href="https://www.woltlab.com">WoltLab GmbH</a>. All rights reserved. | <a class="no_icon" href="https://www.woltlab.com/legal-notice/">Legal Notice</a> | <a class="no_icon" href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
 786     </div>
 787   </div>
 788 </body>
 789
 790 </html>