5.4/view/templates/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="canonical" href="https://docs.woltlab.com/5.4/view/templates/">
  13
  14       <link rel="icon" href="../../assets/default.favicon.ico">
  15       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.2">
  16
  17
  18
  19         <title>Templates - WoltLab Suite Documentation</title>
  20
  21
  22
  23       <link rel="stylesheet" href="../../assets/stylesheets/main.6f955dcd.min.css">
  24
  25
  26         <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
  27
  28
  29
  30           <meta name="theme-color" content="#009485">
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40       <link rel="stylesheet" href="../../stylesheets/extra.css">
  41
  42
  43
  44
  45
  46   </head>
  47
  48
  49
  50
  51
  52
  53
  54     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  55
  56
  57     <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  58
  59     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  60     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  61     <label class="md-overlay" for="__drawer"></label>
  62     <div data-md-component="skip">
  63
  64
  65         <a href="#templates" class="md-skip">
  66           Skip to content
  67         </a>
  68
  69     </div>
  70     <div data-md-component="announce">
  71
  72         <aside class="md-announce">
  73           <div class="md-announce__inner md-grid md-typeset">
  74
  75     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  76
  77           </div>
  78         </aside>
  79
  80     </div>
  81
  82       <header class="md-header" data-md-component="header">
  83   <nav class="md-header__inner md-grid" aria-label="Header">
  84     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  85
  86   <img src="../../assets/logo.png" alt="logo">
  87
  88     </a>
  89     <label class="md-header__button md-icon" for="__drawer">
  90       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  91     </label>
  92     <div class="md-header__title" data-md-component="header-title">
  93       <div class="md-header__ellipsis">
  94         <div class="md-header__topic">
  95           <span class="md-ellipsis">
  96             WoltLab Suite Documentation
  97           </span>
  98         </div>
  99         <div class="md-header__topic" data-md-component="header-topic">
 100           <span class="md-ellipsis">
 101
 102               Templates
 103
 104           </span>
 105         </div>
 106       </div>
 107     </div>
 108
 109
 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.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 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.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 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 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 175   <label class="md-nav__title" for="__drawer">
 176     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 177
 178   <img src="../../assets/logo.png" alt="logo">
 179
 180     </a>
 181     WoltLab Suite Documentation
 182   </label>
 183
 184     <div class="md-nav__source">
 185
 186 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 187   <div class="md-source__icon md-icon">
 188
 189     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 190   </div>
 191   <div class="md-source__repository">
 192     GitHub
 193   </div>
 194 </a>
 195     </div>
 196
 197   <ul class="md-nav__list" data-md-scrollfix>
 198
 199
 200
 201
 202
 203
 204
 205
 206     <li class="md-nav__item">
 207       <a href="../../getting-started/" class="md-nav__link">
 208         Getting Started
 209       </a>
 210     </li>
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222     <li class="md-nav__item md-nav__item--nested">
 223
 224
 225         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 226
 227       <label class="md-nav__link" for="__nav_2">
 228         PHP API
 229         <span class="md-nav__icon md-icon"></span>
 230       </label>
 231       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 232         <label class="md-nav__title" for="__nav_2">
 233           <span class="md-nav__icon md-icon"></span>
 234           PHP API
 235         </label>
 236         <ul class="md-nav__list" data-md-scrollfix>
 237
 238
 239
 240
 241
 242     <li class="md-nav__item">
 243       <a href="../../php/pages/" class="md-nav__link">
 244         Pages
 245       </a>
 246     </li>
 247
 248
 249
 250
 251
 252
 253
 254     <li class="md-nav__item">
 255       <a href="../../php/database-objects/" class="md-nav__link">
 256         Database Objects
 257       </a>
 258     </li>
 259
 260
 261
 262
 263
 264
 265
 266     <li class="md-nav__item">
 267       <a href="../../php/database-access/" class="md-nav__link">
 268         Database Access
 269       </a>
 270     </li>
 271
 272
 273
 274
 275
 276
 277
 278     <li class="md-nav__item">
 279       <a href="../../php/exceptions/" class="md-nav__link">
 280         Exceptions
 281       </a>
 282     </li>
 283
 284
 285
 286
 287
 288
 289
 290
 291     <li class="md-nav__item md-nav__item--nested">
 292
 293
 294         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 295
 296       <label class="md-nav__link" for="__nav_2_5">
 297         API
 298         <span class="md-nav__icon md-icon"></span>
 299       </label>
 300       <nav class="md-nav" aria-label="API" data-md-level="2">
 301         <label class="md-nav__title" for="__nav_2_5">
 302           <span class="md-nav__icon md-icon"></span>
 303           API
 304         </label>
 305         <ul class="md-nav__list" data-md-scrollfix>
 306
 307
 308
 309
 310
 311
 312     <li class="md-nav__item md-nav__item--nested">
 313
 314
 315         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 316
 317       <label class="md-nav__link" for="__nav_2_5_1">
 318         Caches
 319         <span class="md-nav__icon md-icon"></span>
 320       </label>
 321       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 322         <label class="md-nav__title" for="__nav_2_5_1">
 323           <span class="md-nav__icon md-icon"></span>
 324           Caches
 325         </label>
 326         <ul class="md-nav__list" data-md-scrollfix>
 327
 328
 329
 330
 331
 332     <li class="md-nav__item">
 333       <a href="../../php/api/caches/" class="md-nav__link">
 334         Overview
 335       </a>
 336     </li>
 337
 338
 339
 340
 341
 342
 343
 344     <li class="md-nav__item">
 345       <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
 346         Persistent Caches
 347       </a>
 348     </li>
 349
 350
 351
 352
 353
 354
 355
 356     <li class="md-nav__item">
 357       <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
 358         Runtime Caches
 359       </a>
 360     </li>
 361
 362
 363
 364         </ul>
 365       </nav>
 366     </li>
 367
 368
 369
 370
 371
 372
 373
 374     <li class="md-nav__item">
 375       <a href="../../php/api/comments/" class="md-nav__link">
 376         Comments
 377       </a>
 378     </li>
 379
 380
 381
 382
 383
 384
 385
 386     <li class="md-nav__item">
 387       <a href="../../php/api/cronjobs/" class="md-nav__link">
 388         Cronjobs
 389       </a>
 390     </li>
 391
 392
 393
 394
 395
 396
 397
 398     <li class="md-nav__item">
 399       <a href="../../php/api/events/" class="md-nav__link">
 400         Events
 401       </a>
 402     </li>
 403
 404
 405
 406
 407
 408
 409
 410
 411     <li class="md-nav__item md-nav__item--nested">
 412
 413
 414         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 415
 416       <label class="md-nav__link" for="__nav_2_5_5">
 417         Form Builder
 418         <span class="md-nav__icon md-icon"></span>
 419       </label>
 420       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 421         <label class="md-nav__title" for="__nav_2_5_5">
 422           <span class="md-nav__icon md-icon"></span>
 423           Form Builder
 424         </label>
 425         <ul class="md-nav__list" data-md-scrollfix>
 426
 427
 428
 429
 430
 431     <li class="md-nav__item">
 432       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 433         Overview
 434       </a>
 435     </li>
 436
 437
 438
 439
 440
 441
 442
 443     <li class="md-nav__item">
 444       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 445         Structure
 446       </a>
 447     </li>
 448
 449
 450
 451
 452
 453
 454
 455     <li class="md-nav__item">
 456       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 457         Fields
 458       </a>
 459     </li>
 460
 461
 462
 463
 464
 465
 466
 467     <li class="md-nav__item">
 468       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 469         Validation and Data
 470       </a>
 471     </li>
 472
 473
 474
 475
 476
 477
 478
 479     <li class="md-nav__item">
 480       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 481         Dependencies
 482       </a>
 483     </li>
 484
 485
 486
 487         </ul>
 488       </nav>
 489     </li>
 490
 491
 492
 493
 494
 495
 496
 497     <li class="md-nav__item">
 498       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 499         Package Installation Plugins
 500       </a>
 501     </li>
 502
 503
 504
 505
 506
 507
 508
 509     <li class="md-nav__item">
 510       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 511         User Activity Points
 512       </a>
 513     </li>
 514
 515
 516
 517
 518
 519
 520
 521     <li class="md-nav__item">
 522       <a href="../../php/api/user_notifications/" class="md-nav__link">
 523         User Notifications
 524       </a>
 525     </li>
 526
 527
 528
 529
 530
 531
 532
 533     <li class="md-nav__item">
 534       <a href="../../php/api/sitemaps/" class="md-nav__link">
 535         Sitemaps
 536       </a>
 537     </li>
 538
 539
 540
 541         </ul>
 542       </nav>
 543     </li>
 544
 545
 546
 547
 548
 549
 550
 551     <li class="md-nav__item">
 552       <a href="../../php/code-style/" class="md-nav__link">
 553         Code Style
 554       </a>
 555     </li>
 556
 557
 558
 559
 560
 561
 562
 563     <li class="md-nav__item">
 564       <a href="../../php/apps/" class="md-nav__link">
 565         Apps
 566       </a>
 567     </li>
 568
 569
 570
 571
 572
 573
 574
 575     <li class="md-nav__item">
 576       <a href="../../php/gdpr/" class="md-nav__link">
 577         GDPR
 578       </a>
 579     </li>
 580
 581
 582
 583         </ul>
 584       </nav>
 585     </li>
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596
 597
 598
 599     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 600
 601
 602         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" checked>
 603
 604       <label class="md-nav__link" for="__nav_3">
 605         Languages, Templates & CSS
 606         <span class="md-nav__icon md-icon"></span>
 607       </label>
 608       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 609         <label class="md-nav__title" for="__nav_3">
 610           <span class="md-nav__icon md-icon"></span>
 611           Languages, Templates & CSS
 612         </label>
 613         <ul class="md-nav__list" data-md-scrollfix>
 614
 615
 616
 617
 618
 619     <li class="md-nav__item">
 620       <a href="../languages/" class="md-nav__link">
 621         Languages
 622       </a>
 623     </li>
 624
 625
 626
 627
 628
 629
 630
 631
 632
 633     <li class="md-nav__item md-nav__item--active">
 634
 635       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 636
 637
 638
 639
 640
 641         <label class="md-nav__link md-nav__link--active" for="__toc">
 642           Templates
 643           <span class="md-nav__icon md-icon"></span>
 644         </label>
 645
 646       <a href="./" class="md-nav__link md-nav__link--active">
 647         Templates
 648       </a>
 649
 650
 651 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 652
 653
 654
 655
 656
 657
 658     <label class="md-nav__title" for="__toc">
 659       <span class="md-nav__icon md-icon"></span>
 660       Table of contents
 661     </label>
 662     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 663
 664         <li class="md-nav__item">
 665   <a href="#template-types-and-conventions" class="md-nav__link">
 666     Template Types and Conventions
 667   </a>
 668
 669 </li>
 670
 671         <li class="md-nav__item">
 672   <a href="#installing-templates" class="md-nav__link">
 673     Installing Templates
 674   </a>
 675
 676 </li>
 677
 678         <li class="md-nav__item">
 679   <a href="#base-templates" class="md-nav__link">
 680     Base Templates
 681   </a>
 682
 683     <nav class="md-nav" aria-label="Base Templates">
 684       <ul class="md-nav__list">
 685
 686           <li class="md-nav__item">
 687   <a href="#frontend" class="md-nav__link">
 688     Frontend
 689   </a>
 690
 691 </li>
 692
 693           <li class="md-nav__item">
 694   <a href="#backend" class="md-nav__link">
 695     Backend
 696   </a>
 697
 698 </li>
 699
 700       </ul>
 701     </nav>
 702
 703 </li>
 704
 705         <li class="md-nav__item">
 706   <a href="#common-template-components" class="md-nav__link">
 707     Common Template Components
 708   </a>
 709
 710     <nav class="md-nav" aria-label="Common Template Components">
 711       <ul class="md-nav__list">
 712
 713           <li class="md-nav__item">
 714   <a href="#forms" class="md-nav__link">
 715     Forms
 716   </a>
 717
 718 </li>
 719
 720           <li class="md-nav__item">
 721   <a href="#tab-menus" class="md-nav__link">
 722     Tab Menus
 723   </a>
 724
 725 </li>
 726
 727       </ul>
 728     </nav>
 729
 730 </li>
 731
 732         <li class="md-nav__item">
 733   <a href="#template-scripting" class="md-nav__link">
 734     Template Scripting
 735   </a>
 736
 737     <nav class="md-nav" aria-label="Template Scripting">
 738       <ul class="md-nav__list">
 739
 740           <li class="md-nav__item">
 741   <a href="#template-variables" class="md-nav__link">
 742     Template Variables
 743   </a>
 744
 745     <nav class="md-nav" aria-label="Template Variables">
 746       <ul class="md-nav__list">
 747
 748           <li class="md-nav__item">
 749   <a href="#modifiers" class="md-nav__link">
 750     Modifiers
 751   </a>
 752
 753 </li>
 754
 755           <li class="md-nav__item">
 756   <a href="#system-template-variable" class="md-nav__link">
 757     System Template Variable
 758   </a>
 759
 760 </li>
 761
 762       </ul>
 763     </nav>
 764
 765 </li>
 766
 767           <li class="md-nav__item">
 768   <a href="#comments" class="md-nav__link">
 769     Comments
 770   </a>
 771
 772 </li>
 773
 774           <li class="md-nav__item">
 775   <a href="#conditions" class="md-nav__link">
 776     Conditions
 777   </a>
 778
 779 </li>
 780
 781           <li class="md-nav__item">
 782   <a href="#foreach-loops" class="md-nav__link">
 783     Foreach Loops
 784   </a>
 785
 786 </li>
 787
 788           <li class="md-nav__item">
 789   <a href="#including-other-templates" class="md-nav__link">
 790     Including Other Templates
 791   </a>
 792
 793 </li>
 794
 795           <li class="md-nav__item">
 796   <a href="#template-plugins" class="md-nav__link">
 797     Template Plugins
 798   </a>
 799
 800 </li>
 801
 802       </ul>
 803     </nav>
 804
 805 </li>
 806
 807     </ul>
 808
 809 </nav>
 810
 811     </li>
 812
 813
 814
 815
 816
 817
 818
 819     <li class="md-nav__item">
 820       <a href="../template-plugins/" class="md-nav__link">
 821         Template Plugins
 822       </a>
 823     </li>
 824
 825
 826
 827
 828
 829
 830
 831     <li class="md-nav__item">
 832       <a href="../css/" class="md-nav__link">
 833         CSS
 834       </a>
 835     </li>
 836
 837
 838
 839         </ul>
 840       </nav>
 841     </li>
 842
 843
 844
 845
 846
 847
 848
 849
 850
 851
 852
 853     <li class="md-nav__item md-nav__item--nested">
 854
 855
 856         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
 857
 858       <label class="md-nav__link" for="__nav_4">
 859         TypeScript and JavaScript API
 860         <span class="md-nav__icon md-icon"></span>
 861       </label>
 862       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 863         <label class="md-nav__title" for="__nav_4">
 864           <span class="md-nav__icon md-icon"></span>
 865           TypeScript and JavaScript API
 866         </label>
 867         <ul class="md-nav__list" data-md-scrollfix>
 868
 869
 870
 871
 872
 873     <li class="md-nav__item">
 874       <a href="../../javascript/general-usage/" class="md-nav__link">
 875         General Usage
 876       </a>
 877     </li>
 878
 879
 880
 881
 882
 883
 884
 885     <li class="md-nav__item">
 886       <a href="../../javascript/typescript/" class="md-nav__link">
 887         TypeScript
 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_4_3" type="checkbox" id="__nav_4_3" >
 902
 903       <label class="md-nav__link" for="__nav_4_3">
 904         New API
 905         <span class="md-nav__icon md-icon"></span>
 906       </label>
 907       <nav class="md-nav" aria-label="New API" data-md-level="2">
 908         <label class="md-nav__title" for="__nav_4_3">
 909           <span class="md-nav__icon md-icon"></span>
 910           New API
 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="../../javascript/new-api_writing-a-module/" class="md-nav__link">
 920         Writing a module
 921       </a>
 922     </li>
 923
 924
 925
 926
 927
 928
 929
 930     <li class="md-nav__item">
 931       <a href="../../javascript/new-api_data-structures/" class="md-nav__link">
 932         Data Structures
 933       </a>
 934     </li>
 935
 936
 937
 938
 939
 940
 941
 942     <li class="md-nav__item">
 943       <a href="../../javascript/new-api_core/" class="md-nav__link">
 944         Core Functions
 945       </a>
 946     </li>
 947
 948
 949
 950
 951
 952
 953
 954     <li class="md-nav__item">
 955       <a href="../../javascript/new-api_dom/" class="md-nav__link">
 956         DOM
 957       </a>
 958     </li>
 959
 960
 961
 962
 963
 964
 965
 966     <li class="md-nav__item">
 967       <a href="../../javascript/new-api_events/" class="md-nav__link">
 968         Event Handling
 969       </a>
 970     </li>
 971
 972
 973
 974
 975
 976
 977
 978     <li class="md-nav__item">
 979       <a href="../../javascript/new-api_ajax/" class="md-nav__link">
 980         Ajax
 981       </a>
 982     </li>
 983
 984
 985
 986
 987
 988
 989
 990     <li class="md-nav__item">
 991       <a href="../../javascript/new-api_dialogs/" class="md-nav__link">
 992         Dialogs
 993       </a>
 994     </li>
 995
 996
 997
 998
 999
1000
1001
1002     <li class="md-nav__item">
1003       <a href="../../javascript/new-api_browser/" class="md-nav__link">
1004         Browser and Screen Sizes
1005       </a>
1006     </li>
1007
1008
1009
1010
1011
1012
1013
1014     <li class="md-nav__item">
1015       <a href="../../javascript/new-api_ui/" class="md-nav__link">
1016         User Interface
1017       </a>
1018     </li>
1019
1020
1021
1022         </ul>
1023       </nav>
1024     </li>
1025
1026
1027
1028
1029
1030
1031
1032     <li class="md-nav__item">
1033       <a href="../../javascript/legacy-api/" class="md-nav__link">
1034         Legacy API
1035       </a>
1036     </li>
1037
1038
1039
1040
1041
1042
1043
1044     <li class="md-nav__item">
1045       <a href="../../javascript/helper-functions/" class="md-nav__link">
1046         Helper Functions
1047       </a>
1048     </li>
1049
1050
1051
1052
1053
1054
1055
1056     <li class="md-nav__item">
1057       <a href="../../javascript/code-snippets/" class="md-nav__link">
1058         Code Snippets
1059       </a>
1060     </li>
1061
1062
1063
1064         </ul>
1065       </nav>
1066     </li>
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078     <li class="md-nav__item md-nav__item--nested">
1079
1080
1081         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1082
1083       <label class="md-nav__link" for="__nav_5">
1084         Package Components
1085         <span class="md-nav__icon md-icon"></span>
1086       </label>
1087       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1088         <label class="md-nav__title" for="__nav_5">
1089           <span class="md-nav__icon md-icon"></span>
1090           Package Components
1091         </label>
1092         <ul class="md-nav__list" data-md-scrollfix>
1093
1094
1095
1096
1097
1098     <li class="md-nav__item">
1099       <a href="../../package/package-xml/" class="md-nav__link">
1100         package.xml
1101       </a>
1102     </li>
1103
1104
1105
1106
1107
1108
1109
1110
1111     <li class="md-nav__item md-nav__item--nested">
1112
1113
1114         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1115
1116       <label class="md-nav__link" for="__nav_5_2">
1117         PIPs
1118         <span class="md-nav__icon md-icon"></span>
1119       </label>
1120       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1121         <label class="md-nav__title" for="__nav_5_2">
1122           <span class="md-nav__icon md-icon"></span>
1123           PIPs
1124         </label>
1125         <ul class="md-nav__list" data-md-scrollfix>
1126
1127
1128
1129
1130
1131     <li class="md-nav__item">
1132       <a href="../../package/pip/" class="md-nav__link">
1133         Overview
1134       </a>
1135     </li>
1136
1137
1138
1139
1140
1141
1142
1143     <li class="md-nav__item">
1144       <a href="../../package/pip/acl-option/" class="md-nav__link">
1145         aclOption
1146       </a>
1147     </li>
1148
1149
1150
1151
1152
1153
1154
1155     <li class="md-nav__item">
1156       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1157         acpMenu
1158       </a>
1159     </li>
1160
1161
1162
1163
1164
1165
1166
1167     <li class="md-nav__item">
1168       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1169         acpSearchProvider
1170       </a>
1171     </li>
1172
1173
1174
1175
1176
1177
1178
1179     <li class="md-nav__item">
1180       <a href="../../package/pip/acp-template/" class="md-nav__link">
1181         acpTemplate
1182       </a>
1183     </li>
1184
1185
1186
1187
1188
1189
1190
1191     <li class="md-nav__item">
1192       <a href="../../package/pip/bbcode/" class="md-nav__link">
1193         bbcode
1194       </a>
1195     </li>
1196
1197
1198
1199
1200
1201
1202
1203     <li class="md-nav__item">
1204       <a href="../../package/pip/box/" class="md-nav__link">
1205         box
1206       </a>
1207     </li>
1208
1209
1210
1211
1212
1213
1214
1215     <li class="md-nav__item">
1216       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1217         clipboardAction
1218       </a>
1219     </li>
1220
1221
1222
1223
1224
1225
1226
1227     <li class="md-nav__item">
1228       <a href="../../package/pip/core-object/" class="md-nav__link">
1229         coreObject
1230       </a>
1231     </li>
1232
1233
1234
1235
1236
1237
1238
1239     <li class="md-nav__item">
1240       <a href="../../package/pip/cronjob/" class="md-nav__link">
1241         cronjob
1242       </a>
1243     </li>
1244
1245
1246
1247
1248
1249
1250
1251     <li class="md-nav__item">
1252       <a href="../../package/pip/database/" class="md-nav__link">
1253         database
1254       </a>
1255     </li>
1256
1257
1258
1259
1260
1261
1262
1263     <li class="md-nav__item">
1264       <a href="../../package/pip/event-listener/" class="md-nav__link">
1265         eventListener
1266       </a>
1267     </li>
1268
1269
1270
1271
1272
1273
1274
1275     <li class="md-nav__item">
1276       <a href="../../package/pip/file/" class="md-nav__link">
1277         file
1278       </a>
1279     </li>
1280
1281
1282
1283
1284
1285
1286
1287     <li class="md-nav__item">
1288       <a href="../../package/pip/language/" class="md-nav__link">
1289         language
1290       </a>
1291     </li>
1292
1293
1294
1295
1296
1297
1298
1299     <li class="md-nav__item">
1300       <a href="../../package/pip/media-provider/" class="md-nav__link">
1301         mediaProvider
1302       </a>
1303     </li>
1304
1305
1306
1307
1308
1309
1310
1311     <li class="md-nav__item">
1312       <a href="../../package/pip/menu/" class="md-nav__link">
1313         menu
1314       </a>
1315     </li>
1316
1317
1318
1319
1320
1321
1322
1323     <li class="md-nav__item">
1324       <a href="../../package/pip/menu-item/" class="md-nav__link">
1325         menuItem
1326       </a>
1327     </li>
1328
1329
1330
1331
1332
1333
1334
1335     <li class="md-nav__item">
1336       <a href="../../package/pip/object-type/" class="md-nav__link">
1337         objectType
1338       </a>
1339     </li>
1340
1341
1342
1343
1344
1345
1346
1347     <li class="md-nav__item">
1348       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1349         objectTypeDefinition
1350       </a>
1351     </li>
1352
1353
1354
1355
1356
1357
1358
1359     <li class="md-nav__item">
1360       <a href="../../package/pip/option/" class="md-nav__link">
1361         option
1362       </a>
1363     </li>
1364
1365
1366
1367
1368
1369
1370
1371     <li class="md-nav__item">
1372       <a href="../../package/pip/page/" class="md-nav__link">
1373         page
1374       </a>
1375     </li>
1376
1377
1378
1379
1380
1381
1382
1383     <li class="md-nav__item">
1384       <a href="../../package/pip/pip/" class="md-nav__link">
1385         pip
1386       </a>
1387     </li>
1388
1389
1390
1391
1392
1393
1394
1395     <li class="md-nav__item">
1396       <a href="../../package/pip/script/" class="md-nav__link">
1397         script
1398       </a>
1399     </li>
1400
1401
1402
1403
1404
1405
1406
1407     <li class="md-nav__item">
1408       <a href="../../package/pip/smiley/" class="md-nav__link">
1409         smiley
1410       </a>
1411     </li>
1412
1413
1414
1415
1416
1417
1418
1419     <li class="md-nav__item">
1420       <a href="../../package/pip/sql/" class="md-nav__link">
1421         sql
1422       </a>
1423     </li>
1424
1425
1426
1427
1428
1429
1430
1431     <li class="md-nav__item">
1432       <a href="../../package/pip/style/" class="md-nav__link">
1433         style
1434       </a>
1435     </li>
1436
1437
1438
1439
1440
1441
1442
1443     <li class="md-nav__item">
1444       <a href="../../package/pip/template/" class="md-nav__link">
1445         template
1446       </a>
1447     </li>
1448
1449
1450
1451
1452
1453
1454
1455     <li class="md-nav__item">
1456       <a href="../../package/pip/template-listener/" class="md-nav__link">
1457         templateListener
1458       </a>
1459     </li>
1460
1461
1462
1463
1464
1465
1466
1467     <li class="md-nav__item">
1468       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1469         userGroupOption
1470       </a>
1471     </li>
1472
1473
1474
1475
1476
1477
1478
1479     <li class="md-nav__item">
1480       <a href="../../package/pip/user-menu/" class="md-nav__link">
1481         userMenu
1482       </a>
1483     </li>
1484
1485
1486
1487
1488
1489
1490
1491     <li class="md-nav__item">
1492       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1493         userNotificationEvent
1494       </a>
1495     </li>
1496
1497
1498
1499
1500
1501
1502
1503     <li class="md-nav__item">
1504       <a href="../../package/pip/user-option/" class="md-nav__link">
1505         userOption
1506       </a>
1507     </li>
1508
1509
1510
1511
1512
1513
1514
1515     <li class="md-nav__item">
1516       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1517         userProfileMenu
1518       </a>
1519     </li>
1520
1521
1522
1523         </ul>
1524       </nav>
1525     </li>
1526
1527
1528
1529
1530
1531
1532
1533     <li class="md-nav__item">
1534       <a href="../../package/database-php-api/" class="md-nav__link">
1535         Database PHP API
1536       </a>
1537     </li>
1538
1539
1540
1541         </ul>
1542       </nav>
1543     </li>
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555     <li class="md-nav__item md-nav__item--nested">
1556
1557
1558         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1559
1560       <label class="md-nav__link" for="__nav_6">
1561         Migration
1562         <span class="md-nav__icon md-icon"></span>
1563       </label>
1564       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1565         <label class="md-nav__title" for="__nav_6">
1566           <span class="md-nav__icon md-icon"></span>
1567           Migration
1568         </label>
1569         <ul class="md-nav__list" data-md-scrollfix>
1570
1571
1572
1573
1574
1575
1576     <li class="md-nav__item md-nav__item--nested">
1577
1578
1579         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1580
1581       <label class="md-nav__link" for="__nav_6_1">
1582         Migrating from WSC 5.3
1583         <span class="md-nav__icon md-icon"></span>
1584       </label>
1585       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1586         <label class="md-nav__title" for="__nav_6_1">
1587           <span class="md-nav__icon md-icon"></span>
1588           Migrating from WSC 5.3
1589         </label>
1590         <ul class="md-nav__list" data-md-scrollfix>
1591
1592
1593
1594
1595
1596     <li class="md-nav__item">
1597       <a href="../../migration/wsc53/php/" class="md-nav__link">
1598         PHP API
1599       </a>
1600     </li>
1601
1602
1603
1604
1605
1606
1607
1608     <li class="md-nav__item">
1609       <a href="../../migration/wsc53/session/" class="md-nav__link">
1610         Session Handling and Authentication
1611       </a>
1612     </li>
1613
1614
1615
1616
1617
1618
1619
1620     <li class="md-nav__item">
1621       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1622         TypeScript and JavaScript
1623       </a>
1624     </li>
1625
1626
1627
1628
1629
1630
1631
1632     <li class="md-nav__item">
1633       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1634         Templates
1635       </a>
1636     </li>
1637
1638
1639
1640
1641
1642
1643
1644     <li class="md-nav__item">
1645       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1646         Third Party Libraries
1647       </a>
1648     </li>
1649
1650
1651
1652         </ul>
1653       </nav>
1654     </li>
1655
1656
1657
1658
1659
1660
1661
1662
1663     <li class="md-nav__item md-nav__item--nested">
1664
1665
1666         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1667
1668       <label class="md-nav__link" for="__nav_6_2">
1669         Migrating from WSC 5.2
1670         <span class="md-nav__icon md-icon"></span>
1671       </label>
1672       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1673         <label class="md-nav__title" for="__nav_6_2">
1674           <span class="md-nav__icon md-icon"></span>
1675           Migrating from WSC 5.2
1676         </label>
1677         <ul class="md-nav__list" data-md-scrollfix>
1678
1679
1680
1681
1682
1683     <li class="md-nav__item">
1684       <a href="../../migration/wsc52/php/" class="md-nav__link">
1685         PHP API
1686       </a>
1687     </li>
1688
1689
1690
1691
1692
1693
1694
1695     <li class="md-nav__item">
1696       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1697         Templates and Languages
1698       </a>
1699     </li>
1700
1701
1702
1703
1704
1705
1706
1707     <li class="md-nav__item">
1708       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1709         Third Party Libraries
1710       </a>
1711     </li>
1712
1713
1714
1715         </ul>
1716       </nav>
1717     </li>
1718
1719
1720
1721
1722
1723
1724
1725
1726     <li class="md-nav__item md-nav__item--nested">
1727
1728
1729         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1730
1731       <label class="md-nav__link" for="__nav_6_3">
1732         Migrating from WSC 3.1
1733         <span class="md-nav__icon md-icon"></span>
1734       </label>
1735       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1736         <label class="md-nav__title" for="__nav_6_3">
1737           <span class="md-nav__icon md-icon"></span>
1738           Migrating from WSC 3.1
1739         </label>
1740         <ul class="md-nav__list" data-md-scrollfix>
1741
1742
1743
1744
1745
1746     <li class="md-nav__item">
1747       <a href="../../migration/wsc31/php/" class="md-nav__link">
1748         PHP API
1749       </a>
1750     </li>
1751
1752
1753
1754         </ul>
1755       </nav>
1756     </li>
1757
1758
1759
1760
1761
1762
1763
1764
1765     <li class="md-nav__item md-nav__item--nested">
1766
1767
1768         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1769
1770       <label class="md-nav__link" for="__nav_6_4">
1771         Migrating from WSC 3.0
1772         <span class="md-nav__icon md-icon"></span>
1773       </label>
1774       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1775         <label class="md-nav__title" for="__nav_6_4">
1776           <span class="md-nav__icon md-icon"></span>
1777           Migrating from WSC 3.0
1778         </label>
1779         <ul class="md-nav__list" data-md-scrollfix>
1780
1781
1782
1783
1784
1785     <li class="md-nav__item">
1786       <a href="../../migration/wsc30/php/" class="md-nav__link">
1787         PHP API
1788       </a>
1789     </li>
1790
1791
1792
1793
1794
1795
1796
1797     <li class="md-nav__item">
1798       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1799         JavaScript API
1800       </a>
1801     </li>
1802
1803
1804
1805
1806
1807
1808
1809     <li class="md-nav__item">
1810       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1811         Templates
1812       </a>
1813     </li>
1814
1815
1816
1817
1818
1819
1820
1821     <li class="md-nav__item">
1822       <a href="../../migration/wsc30/css/" class="md-nav__link">
1823         CSS
1824       </a>
1825     </li>
1826
1827
1828
1829
1830
1831
1832
1833     <li class="md-nav__item">
1834       <a href="../../migration/wsc30/package/" class="md-nav__link">
1835         Package Components
1836       </a>
1837     </li>
1838
1839
1840
1841         </ul>
1842       </nav>
1843     </li>
1844
1845
1846
1847
1848
1849
1850
1851
1852     <li class="md-nav__item md-nav__item--nested">
1853
1854
1855         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1856
1857       <label class="md-nav__link" for="__nav_6_5">
1858         Migrating from WCF 2.1
1859         <span class="md-nav__icon md-icon"></span>
1860       </label>
1861       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1862         <label class="md-nav__title" for="__nav_6_5">
1863           <span class="md-nav__icon md-icon"></span>
1864           Migrating from WCF 2.1
1865         </label>
1866         <ul class="md-nav__list" data-md-scrollfix>
1867
1868
1869
1870
1871
1872     <li class="md-nav__item">
1873       <a href="../../migration/wcf21/php/" class="md-nav__link">
1874         PHP API
1875       </a>
1876     </li>
1877
1878
1879
1880
1881
1882
1883
1884     <li class="md-nav__item">
1885       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1886         Templates
1887       </a>
1888     </li>
1889
1890
1891
1892
1893
1894
1895
1896     <li class="md-nav__item">
1897       <a href="../../migration/wcf21/css/" class="md-nav__link">
1898         CSS
1899       </a>
1900     </li>
1901
1902
1903
1904
1905
1906
1907
1908     <li class="md-nav__item">
1909       <a href="../../migration/wcf21/package/" class="md-nav__link">
1910         Package Components
1911       </a>
1912     </li>
1913
1914
1915
1916         </ul>
1917       </nav>
1918     </li>
1919
1920
1921
1922         </ul>
1923       </nav>
1924     </li>
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936     <li class="md-nav__item md-nav__item--nested">
1937
1938
1939         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1940
1941       <label class="md-nav__link" for="__nav_7">
1942         Tutorials
1943         <span class="md-nav__icon md-icon"></span>
1944       </label>
1945       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1946         <label class="md-nav__title" for="__nav_7">
1947           <span class="md-nav__icon md-icon"></span>
1948           Tutorials
1949         </label>
1950         <ul class="md-nav__list" data-md-scrollfix>
1951
1952
1953
1954
1955
1956
1957     <li class="md-nav__item md-nav__item--nested">
1958
1959
1960         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1961
1962       <label class="md-nav__link" for="__nav_7_1">
1963         Tutorial Series
1964         <span class="md-nav__icon md-icon"></span>
1965       </label>
1966       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1967         <label class="md-nav__title" for="__nav_7_1">
1968           <span class="md-nav__icon md-icon"></span>
1969           Tutorial Series
1970         </label>
1971         <ul class="md-nav__list" data-md-scrollfix>
1972
1973
1974
1975
1976
1977     <li class="md-nav__item">
1978       <a href="../../tutorial/series/overview/" class="md-nav__link">
1979         Overview
1980       </a>
1981     </li>
1982
1983
1984
1985
1986
1987
1988
1989     <li class="md-nav__item">
1990       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1991         Part 1
1992       </a>
1993     </li>
1994
1995
1996
1997
1998
1999
2000
2001     <li class="md-nav__item">
2002       <a href="../../tutorial/series/part_2/" class="md-nav__link">
2003         Part 2
2004       </a>
2005     </li>
2006
2007
2008
2009
2010
2011
2012
2013     <li class="md-nav__item">
2014       <a href="../../tutorial/series/part_3/" class="md-nav__link">
2015         Part 3
2016       </a>
2017     </li>
2018
2019
2020
2021
2022
2023
2024
2025     <li class="md-nav__item">
2026       <a href="../../tutorial/series/part_4/" class="md-nav__link">
2027         Part 4
2028       </a>
2029     </li>
2030
2031
2032
2033
2034
2035
2036
2037     <li class="md-nav__item">
2038       <a href="../../tutorial/series/part_5/" class="md-nav__link">
2039         Part 5
2040       </a>
2041     </li>
2042
2043
2044
2045         </ul>
2046       </nav>
2047     </li>
2048
2049
2050
2051         </ul>
2052       </nav>
2053     </li>
2054
2055
2056
2057   </ul>
2058 </nav>
2059                   </div>
2060                 </div>
2061               </div>
2062
2063
2064
2065               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2066                 <div class="md-sidebar__scrollwrap">
2067                   <div class="md-sidebar__inner">
2068
2069 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2070
2071
2072
2073
2074
2075
2076     <label class="md-nav__title" for="__toc">
2077       <span class="md-nav__icon md-icon"></span>
2078       Table of contents
2079     </label>
2080     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2081
2082         <li class="md-nav__item">
2083   <a href="#template-types-and-conventions" class="md-nav__link">
2084     Template Types and Conventions
2085   </a>
2086
2087 </li>
2088
2089         <li class="md-nav__item">
2090   <a href="#installing-templates" class="md-nav__link">
2091     Installing Templates
2092   </a>
2093
2094 </li>
2095
2096         <li class="md-nav__item">
2097   <a href="#base-templates" class="md-nav__link">
2098     Base Templates
2099   </a>
2100
2101     <nav class="md-nav" aria-label="Base Templates">
2102       <ul class="md-nav__list">
2103
2104           <li class="md-nav__item">
2105   <a href="#frontend" class="md-nav__link">
2106     Frontend
2107   </a>
2108
2109 </li>
2110
2111           <li class="md-nav__item">
2112   <a href="#backend" class="md-nav__link">
2113     Backend
2114   </a>
2115
2116 </li>
2117
2118       </ul>
2119     </nav>
2120
2121 </li>
2122
2123         <li class="md-nav__item">
2124   <a href="#common-template-components" class="md-nav__link">
2125     Common Template Components
2126   </a>
2127
2128     <nav class="md-nav" aria-label="Common Template Components">
2129       <ul class="md-nav__list">
2130
2131           <li class="md-nav__item">
2132   <a href="#forms" class="md-nav__link">
2133     Forms
2134   </a>
2135
2136 </li>
2137
2138           <li class="md-nav__item">
2139   <a href="#tab-menus" class="md-nav__link">
2140     Tab Menus
2141   </a>
2142
2143 </li>
2144
2145       </ul>
2146     </nav>
2147
2148 </li>
2149
2150         <li class="md-nav__item">
2151   <a href="#template-scripting" class="md-nav__link">
2152     Template Scripting
2153   </a>
2154
2155     <nav class="md-nav" aria-label="Template Scripting">
2156       <ul class="md-nav__list">
2157
2158           <li class="md-nav__item">
2159   <a href="#template-variables" class="md-nav__link">
2160     Template Variables
2161   </a>
2162
2163     <nav class="md-nav" aria-label="Template Variables">
2164       <ul class="md-nav__list">
2165
2166           <li class="md-nav__item">
2167   <a href="#modifiers" class="md-nav__link">
2168     Modifiers
2169   </a>
2170
2171 </li>
2172
2173           <li class="md-nav__item">
2174   <a href="#system-template-variable" class="md-nav__link">
2175     System Template Variable
2176   </a>
2177
2178 </li>
2179
2180       </ul>
2181     </nav>
2182
2183 </li>
2184
2185           <li class="md-nav__item">
2186   <a href="#comments" class="md-nav__link">
2187     Comments
2188   </a>
2189
2190 </li>
2191
2192           <li class="md-nav__item">
2193   <a href="#conditions" class="md-nav__link">
2194     Conditions
2195   </a>
2196
2197 </li>
2198
2199           <li class="md-nav__item">
2200   <a href="#foreach-loops" class="md-nav__link">
2201     Foreach Loops
2202   </a>
2203
2204 </li>
2205
2206           <li class="md-nav__item">
2207   <a href="#including-other-templates" class="md-nav__link">
2208     Including Other Templates
2209   </a>
2210
2211 </li>
2212
2213           <li class="md-nav__item">
2214   <a href="#template-plugins" class="md-nav__link">
2215     Template Plugins
2216   </a>
2217
2218 </li>
2219
2220       </ul>
2221     </nav>
2222
2223 </li>
2224
2225     </ul>
2226
2227 </nav>
2228                   </div>
2229                 </div>
2230               </div>
2231
2232
2233           <div class="md-content" data-md-component="content">
2234             <article class="md-content__inner md-typeset">
2235
2236
2237                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/view/templates.md" title="Edit this page" class="md-content__button md-icon">
2238                     <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>
2239                   </a>
2240
2241
2242                 <h1 id="templates">Templates<a class="headerlink" href="#templates" title="Permanent link">#</a></h1>
2243 <p>Templates are responsible for the output a user sees when requesting a page (while the PHP code is responsible for providing the data that will be shown).
2244 Templates are text files with <code>.tpl</code> as the file extension.
2245 WoltLab Suite Core compiles the template files once into a PHP file that is executed when a user requests the page.
2246 In subsequent request, as the PHP file containing the compiled template already exists, compiling the template is not necessary anymore.</p>
2247 <h2 id="template-types-and-conventions">Template Types and Conventions<a class="headerlink" href="#template-types-and-conventions" title="Permanent link">#</a></h2>
2248 <p>WoltLab Suite Core supports two types of templates:
2249 frontend templates (or simply <em>templates</em>) and backend templates (<em>ACP templates</em>).
2250 Each type of template is only available in its respective domain, thus frontend templates cannot be included or used in the ACP and vice versa.</p>
2251 <p>For pages and forms, the name of the template matches the unqualified name of the PHP class except for the <code>Page</code> or <code>Form</code> suffix:</p>
2252 <ul>
2253 <li><code>RegisterForm.class.php</code> → <code>register.tpl</code></li>
2254 <li><code>UserPage.class.php</code> → <code>user.tpl</code></li>
2255 </ul>
2256 <p>If you follow this convention, WoltLab Suite Core will automatically determine the template name so that you do not have to explicitly set it.</p>
2257 <div class="admonition info">
2258 <p class="admonition-title">For forms that handle creating and editing objects, in general, there are two form classes: <code>FooAddForm</code> and <code>FooEditForm</code>. WoltLab Suite Core, however, generally only uses one template <code>fooAdd.tpl</code> and the template variable <code>$action</code> to distinguish between creating a new object (<code>$action = 'add'</code>) and editing an existing object (<code>$action = 'edit'</code>) as the differences between templates for adding and editing an object are minimal.</p>
2259 </div>
2260 <h2 id="installing-templates">Installing Templates<a class="headerlink" href="#installing-templates" title="Permanent link">#</a></h2>
2261 <p>Templates and ACP templates are installed by two different package installation plugins:
2262 the <a href="../../package/pip/template/">template PIP</a> and the <a href="../../package/pip/acp-template/">ACP template PIP</a>.
2263 More information about installing templates can be found on those pages. </p>
2264 <h2 id="base-templates">Base Templates<a class="headerlink" href="#base-templates" title="Permanent link">#</a></h2>
2265 <h3 id="frontend">Frontend<a class="headerlink" href="#frontend" title="Permanent link">#</a></h3>
2266 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2267 <span class="normal">2</span>
2268 <span class="normal">3</span>
2269 <span class="normal">4</span>
2270 <span class="normal">5</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;header&#39;</span><span class="cp">}</span><span class="x"></span>
2271
2272 <span class="cp">{</span><span class="c">* content *</span><span class="cp">}</span><span class="x"></span>
2273
2274 <span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;footer&#39;</span><span class="cp">}</span><span class="x"></span>
2275 </code></pre></div>
2276 </td></tr></table>
2277 <h3 id="backend">Backend<a class="headerlink" href="#backend" title="Permanent link">#</a></h3>
2278 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2279 <span class="normal"> 2</span>
2280 <span class="normal"> 3</span>
2281 <span class="normal"> 4</span>
2282 <span class="normal"> 5</span>
2283 <span class="normal"> 6</span>
2284 <span class="normal"> 7</span>
2285 <span class="normal"> 8</span>
2286 <span class="normal"> 9</span>
2287 <span class="normal">10</span>
2288 <span class="normal">11</span>
2289 <span class="normal">12</span>
2290 <span class="normal">13</span>
2291 <span class="normal">14</span>
2292 <span class="normal">15</span>
2293 <span class="normal">16</span>
2294 <span class="normal">17</span>
2295 <span class="normal">18</span>
2296 <span class="normal">19</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;header&#39;</span> <span class="na">pageTitle</span><span class="o">=</span><span class="s1">&#39;foo.bar.baz&#39;</span><span class="cp">}</span><span class="x"></span>
2297
2298 <span class="x">&lt;header class=&quot;contentHeader&quot;&gt;</span>
2299 <span class="x">    &lt;div class=&quot;contentHeaderTitle&quot;&gt;</span>
2300 <span class="x">        &lt;h1 class=&quot;contentTitle&quot;&gt;Title&lt;/h1&gt;</span>
2301 <span class="x">    &lt;/div&gt;</span>
2302
2303 <span class="x">    &lt;nav class=&quot;contentHeaderNavigation&quot;&gt;</span>
2304 <span class="x">        &lt;ul&gt;</span>
2305 <span class="x">            </span><span class="cp">{</span><span class="c">* your default content header navigation buttons *</span><span class="cp">}</span><span class="x"></span>
2306
2307 <span class="x">            </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;contentHeaderNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
2308 <span class="x">        &lt;/ul&gt;</span>
2309 <span class="x">    &lt;/nav&gt;</span>
2310 <span class="x">&lt;/header&gt;</span>
2311
2312 <span class="cp">{</span><span class="c">* content *</span><span class="cp">}</span><span class="x"></span>
2313
2314 <span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;footer&#39;</span><span class="cp">}</span><span class="x"></span>
2315 </code></pre></div>
2316 </td></tr></table>
2317 <p><code>foo.bar.baz</code> is the language item that contains the title of the page.</p>
2318 <h2 id="common-template-components">Common Template Components<a class="headerlink" href="#common-template-components" title="Permanent link">#</a></h2>
2319 <h3 id="forms">Forms<a class="headerlink" href="#forms" title="Permanent link">#</a></h3>
2320 <div class="admonition info">
2321 <p class="admonition-title">For new forms, use the new <a href="../../php/api/form_builder/overview/">form builder API</a> introduced with WoltLab Suite 5.2.</p>
2322 </div>
2323 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2324 <span class="normal"> 2</span>
2325 <span class="normal"> 3</span>
2326 <span class="normal"> 4</span>
2327 <span class="normal"> 5</span>
2328 <span class="normal"> 6</span>
2329 <span class="normal"> 7</span>
2330 <span class="normal"> 8</span>
2331 <span class="normal"> 9</span>
2332 <span class="normal">10</span>
2333 <span class="normal">11</span>
2334 <span class="normal">12</span>
2335 <span class="normal">13</span>
2336 <span class="normal">14</span>
2337 <span class="normal">15</span>
2338 <span class="normal">16</span>
2339 <span class="normal">17</span>
2340 <span class="normal">18</span>
2341 <span class="normal">19</span>
2342 <span class="normal">20</span>
2343 <span class="normal">21</span>
2344 <span class="normal">22</span>
2345 <span class="normal">23</span>
2346 <span class="normal">24</span>
2347 <span class="normal">25</span>
2348 <span class="normal">26</span>
2349 <span class="normal">27</span>
2350 <span class="normal">28</span>
2351 <span class="normal">29</span>
2352 <span class="normal">30</span>
2353 <span class="normal">31</span>
2354 <span class="normal">32</span>
2355 <span class="normal">33</span>
2356 <span class="normal">34</span>
2357 <span class="normal">35</span>
2358 <span class="normal">36</span>
2359 <span class="normal">37</span>
2360 <span class="normal">38</span>
2361 <span class="normal">39</span>
2362 <span class="normal">40</span>
2363 <span class="normal">41</span>
2364 <span class="normal">42</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="x">&lt;form method=&quot;post&quot; action=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;FooBar&#39;</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span>
2365 <span class="x">    &lt;div class=&quot;section&quot;&gt;</span>
2366 <span class="x">        &lt;dl</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorField</span> <span class="o">==</span> <span class="s1">&#39;baz&#39;</span><span class="cp">}</span><span class="x"> class=&quot;formError&quot;</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&gt;</span>
2367 <span class="x">            &lt;dt&gt;&lt;label for=&quot;baz&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">foo.bar.baz</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/label&gt;&lt;/dt&gt;</span>
2368 <span class="x">            &lt;dd&gt;</span>
2369 <span class="x">                &lt;input type=&quot;text&quot; id=&quot;baz&quot; name=&quot;baz&quot; value=&quot;</span><span class="cp">{</span><span class="nv">$baz</span><span class="cp">}</span><span class="x">&quot; class=&quot;long&quot; required autofocus&gt;</span>
2370 <span class="x">                </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorField</span> <span class="o">==</span> <span class="s1">&#39;baz&#39;</span><span class="cp">}</span><span class="x"></span>
2371 <span class="x">                    &lt;small class=&quot;innerError&quot;&gt;</span>
2372 <span class="x">                        </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorType</span> <span class="o">==</span> <span class="s1">&#39;empty&#39;</span><span class="cp">}</span><span class="x"></span>
2373 <span class="x">                            </span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.form.error.empty</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x"></span>
2374 <span class="x">                        </span><span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x"></span>
2375 <span class="x">                            </span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">foo.bar.baz.error.</span><span class="cp">{</span><span class="o">@</span><span class="nv">$errorType</span><span class="cp">}{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x"></span>
2376 <span class="x">                        </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2377 <span class="x">                    &lt;/small&gt;</span>
2378 <span class="x">                </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2379 <span class="x">            &lt;/dd&gt;</span>
2380 <span class="x">        &lt;/dl&gt;</span>
2381
2382 <span class="x">        &lt;dl&gt;</span>
2383 <span class="x">            &lt;dt&gt;&lt;label for=&quot;bar&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">foo.bar.bar</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/label&gt;&lt;/dt&gt;</span>
2384 <span class="x">            &lt;dd&gt;</span>
2385 <span class="x">                &lt;textarea name=&quot;bar&quot; id=&quot;bar&quot; cols=&quot;40&quot; rows=&quot;10&quot;&gt;</span><span class="cp">{</span><span class="nv">$bar</span><span class="cp">}</span><span class="x">&lt;/textarea&gt;</span>
2386 <span class="x">                </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorField</span> <span class="o">==</span> <span class="s1">&#39;bar&#39;</span><span class="cp">}</span><span class="x"></span>
2387 <span class="x">                    &lt;small class=&quot;innerError&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">foo.bar.bar.error.</span><span class="cp">{</span><span class="o">@</span><span class="nv">$errorType</span><span class="cp">}{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/small&gt;</span>
2388 <span class="x">                </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2389 <span class="x">            &lt;/dd&gt;</span>
2390 <span class="x">        &lt;/dl&gt;</span>
2391
2392 <span class="x">        </span><span class="cp">{</span><span class="c">* other fields *</span><span class="cp">}</span><span class="x"></span>
2393
2394 <span class="x">        </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;dataFields&#39;</span><span class="cp">}</span><span class="x"></span>
2395 <span class="x">    &lt;/div&gt;</span>
2396
2397 <span class="x">    </span><span class="cp">{</span><span class="c">* other sections *</span><span class="cp">}</span><span class="x"></span>
2398
2399 <span class="x">    </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;sections&#39;</span><span class="cp">}</span><span class="x"></span>
2400
2401 <span class="x">    &lt;div class=&quot;formSubmit&quot;&gt;</span>
2402 <span class="x">        &lt;input type=&quot;submit&quot; value=&quot;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.button.submit</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&quot; accesskey=&quot;s&quot;&gt;</span>
2403 <span class="x">        </span><span class="cp">{</span><span class="nf">csrfToken</span><span class="cp">}</span><span class="x"></span>
2404 <span class="x">    &lt;/div&gt;</span>
2405 <span class="x">&lt;/form&gt;</span>
2406 </code></pre></div>
2407 </td></tr></table>
2408 <h3 id="tab-menus">Tab Menus<a class="headerlink" href="#tab-menus" title="Permanent link">#</a></h3>
2409 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2410 <span class="normal"> 2</span>
2411 <span class="normal"> 3</span>
2412 <span class="normal"> 4</span>
2413 <span class="normal"> 5</span>
2414 <span class="normal"> 6</span>
2415 <span class="normal"> 7</span>
2416 <span class="normal"> 8</span>
2417 <span class="normal"> 9</span>
2418 <span class="normal">10</span>
2419 <span class="normal">11</span>
2420 <span class="normal">12</span>
2421 <span class="normal">13</span>
2422 <span class="normal">14</span>
2423 <span class="normal">15</span>
2424 <span class="normal">16</span>
2425 <span class="normal">17</span>
2426 <span class="normal">18</span>
2427 <span class="normal">19</span>
2428 <span class="normal">20</span>
2429 <span class="normal">21</span>
2430 <span class="normal">22</span>
2431 <span class="normal">23</span>
2432 <span class="normal">24</span>
2433 <span class="normal">25</span>
2434 <span class="normal">26</span>
2435 <span class="normal">27</span>
2436 <span class="normal">28</span>
2437 <span class="normal">29</span>
2438 <span class="normal">30</span>
2439 <span class="normal">31</span>
2440 <span class="normal">32</span>
2441 <span class="normal">33</span>
2442 <span class="normal">34</span>
2443 <span class="normal">35</span>
2444 <span class="normal">36</span>
2445 <span class="normal">37</span>
2446 <span class="normal">38</span>
2447 <span class="normal">39</span>
2448 <span class="normal">40</span>
2449 <span class="normal">41</span>
2450 <span class="normal">42</span>
2451 <span class="normal">43</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="x">&lt;div class=&quot;section tabMenuContainer&quot;&gt;</span>
2452 <span class="x">    &lt;nav class=&quot;tabMenu&quot;&gt;</span>
2453 <span class="x">        &lt;ul&gt;</span>
2454 <span class="x">            &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="o">@</span><span class="nv">$__wcf</span><span class="o">-&gt;</span><span class="na">getAnchor</span><span class="o">(</span><span class="s1">&#39;tab1&#39;</span><span class="o">)</span><span class="cp">}</span><span class="x">&quot;&gt;Tab 1&lt;/a&gt;&lt;/li&gt;</span>
2455 <span class="x">            &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="o">@</span><span class="nv">$__wcf</span><span class="o">-&gt;</span><span class="na">getAnchor</span><span class="o">(</span><span class="s1">&#39;tab2&#39;</span><span class="o">)</span><span class="cp">}</span><span class="x">&quot;&gt;Tab 2&lt;/a&gt;&lt;/li&gt;</span>
2456
2457 <span class="x">            </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;tabMenuTabs&#39;</span><span class="cp">}</span><span class="x"></span>
2458 <span class="x">        &lt;/ul&gt;</span>
2459 <span class="x">    &lt;/nav&gt;</span>
2460
2461 <span class="x">    &lt;div id=&quot;tab1&quot; class=&quot;tabMenuContent&quot;&gt;</span>
2462 <span class="x">        &lt;div class=&quot;section&quot;&gt;</span>
2463 <span class="x">            </span><span class="cp">{</span><span class="c">* contents of first tab *</span><span class="cp">}</span><span class="x"></span>
2464 <span class="x">        &lt;/div&gt;</span>
2465 <span class="x">    &lt;/div&gt;</span>
2466
2467 <span class="x">    &lt;div id=&quot;tab2&quot; class=&quot;tabMenuContainer tabMenuContent&quot;&gt;</span>
2468 <span class="x">        &lt;nav class=&quot;menu&quot;&gt;</span>
2469 <span class="x">            &lt;ul&gt;</span>
2470 <span class="x">                &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="o">@</span><span class="nv">$__wcf</span><span class="o">-&gt;</span><span class="na">getAnchor</span><span class="o">(</span><span class="s1">&#39;tab2A&#39;</span><span class="o">)</span><span class="cp">}</span><span class="x">&quot;&gt;Tab 2A&lt;/a&gt;&lt;/li&gt;</span>
2471 <span class="x">                &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="o">@</span><span class="nv">$__wcf</span><span class="o">-&gt;</span><span class="na">getAnchor</span><span class="o">(</span><span class="s1">&#39;tab2B&#39;</span><span class="o">)</span><span class="cp">}</span><span class="x">&quot;&gt;Tab 2B&lt;/a&gt;&lt;/li&gt;</span>
2472
2473 <span class="x">                </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;tabMenuTab2Subtabs&#39;</span><span class="cp">}</span><span class="x"></span>
2474 <span class="x">            &lt;/ul&gt;</span>
2475 <span class="x">        &lt;/nav&gt;</span>
2476
2477 <span class="x">        &lt;div id=&quot;tab2A&quot; class=&quot;tabMenuContent&quot;&gt;</span>
2478 <span class="x">            &lt;div class=&quot;section&quot;&gt;</span>
2479 <span class="x">                </span><span class="cp">{</span><span class="c">* contents of first subtab for second tab *</span><span class="cp">}</span><span class="x"></span>
2480 <span class="x">            &lt;/div&gt;</span>
2481 <span class="x">        &lt;/div&gt;</span>
2482
2483 <span class="x">        &lt;div id=&quot;tab2B&quot; class=&quot;tabMenuContent&quot;&gt;</span>
2484 <span class="x">            &lt;div class=&quot;section&quot;&gt;</span>
2485 <span class="x">                </span><span class="cp">{</span><span class="c">* contents of second subtab for second tab *</span><span class="cp">}</span><span class="x"></span>
2486 <span class="x">            &lt;/div&gt;</span>
2487 <span class="x">        &lt;/div&gt;</span>
2488
2489 <span class="x">        </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;tabMenuTab2Contents&#39;</span><span class="cp">}</span><span class="x"></span>
2490 <span class="x">    &lt;/div&gt;</span>
2491
2492 <span class="x">    </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;tabMenuContents&#39;</span><span class="cp">}</span><span class="x"></span>
2493 <span class="x">&lt;/div&gt;</span>
2494 </code></pre></div>
2495 </td></tr></table>
2496 <h2 id="template-scripting">Template Scripting<a class="headerlink" href="#template-scripting" title="Permanent link">#</a></h2>
2497 <h3 id="template-variables">Template Variables<a class="headerlink" href="#template-variables" title="Permanent link">#</a></h3>
2498 <p>Template variables can be assigned via <code>WCF::getTPL()-&gt;assign('foo', 'bar')</code> and accessed in templates via <code>$foo</code>:</p>
2499 <ul>
2500 <li><code>{$foo}</code> will result in the contents of <code>$foo</code> to be passed to <code>StringUtil::encodeHTML()</code> before being printed.</li>
2501 <li><code>{#$foo}</code> will result in the contents of <code>$foo</code> to be passed to <code>StringUtil::formatNumeric()</code> before being printed.
2502   Thus, this method is relevant when printing numbers and having them formatted correctly according the the user’s language.</li>
2503 <li><code>{@$foo}</code> will result in the contents of <code>$foo</code> to be printed directly.
2504   In general, this method should not be used for user-generated input.</li>
2505 </ul>
2506 <p>Multiple template variables can be assigned by passing an array:</p>
2507 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2508 <span class="normal">2</span>
2509 <span class="normal">3</span>
2510 <span class="normal">4</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="nx">WCF</span><span class="o">::</span><span class="na">getTPL</span><span class="p">()</span><span class="o">-&gt;</span><span class="na">assign</span><span class="p">([</span>
2511     <span class="s1">&#39;foo&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;bar&#39;</span><span class="p">,</span>
2512     <span class="s1">&#39;baz&#39;</span> <span class="o">=&gt;</span> <span class="k">false</span>
2513 <span class="p">]);</span>
2514 </code></pre></div>
2515 </td></tr></table>
2516 <h4 id="modifiers">Modifiers<a class="headerlink" href="#modifiers" title="Permanent link">#</a></h4>
2517 <p>If you want to call a function on a variable, you can use the modifier syntax:
2518 <code>{@$foo|trim}</code>, for example, results in the trimmed contents of <code>$foo</code> to be printed.</p>
2519 <h4 id="system-template-variable">System Template Variable<a class="headerlink" href="#system-template-variable" title="Permanent link">#</a></h4>
2520 <p>The template variable <code>$tpl</code> is automatically assigned and is an array containing different data:</p>
2521 <ul>
2522 <li><code>$tpl[get]</code> contains <code>$_GET</code>.</li>
2523 <li><code>$tpl[post]</code> contains <code>$_POST</code>.</li>
2524 <li><code>$tpl[cookie]</code> contains <code>$_COOKIE</code>.</li>
2525 <li><code>$tpl[server]</code> contains <code>$_SERVER</code>.</li>
2526 <li><code>$tpl[env]</code> contains <code>$_ENV</code>.</li>
2527 <li><code>$tpl[now]</code> contains <code>TIME_NOW</code> (current timestamp).</li>
2528 </ul>
2529 <p>Furthermore, the following template variables are also automatically assigned:</p>
2530 <ul>
2531 <li><code>$__wcf</code> contains the <code>WCF</code> object (or <code>WCFACP</code> object in the backend).</li>
2532 </ul>
2533 <h3 id="comments">Comments<a class="headerlink" href="#comments" title="Permanent link">#</a></h3>
2534 <p>Comments are wrapped in <code>{*</code> and <code>*}</code> and can span multiple lines:</p>
2535 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2536 <span class="normal">2</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="c">* some</span>
2537 <span class="c">   comment *</span><span class="cp">}</span><span class="x"></span>
2538 </code></pre></div>
2539 </td></tr></table>
2540 <div class="admonition info">
2541 <p class="admonition-title">The template compiler discards the comments, so that they not included in the compiled template.</p>
2542 </div>
2543 <h3 id="conditions">Conditions<a class="headerlink" href="#conditions" title="Permanent link">#</a></h3>
2544 <p>Conditions follow a similar syntax to PHP code:</p>
2545 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2546 <span class="normal">2</span>
2547 <span class="normal">3</span>
2548 <span class="normal">4</span>
2549 <span class="normal">5</span>
2550 <span class="normal">6</span>
2551 <span class="normal">7</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">if</span> <span class="nv">$foo</span> <span class="o">===</span> <span class="s1">&#39;bar&#39;</span><span class="cp">}</span><span class="x"></span>
2552 <span class="x">    foo is bar</span>
2553 <span class="cp">{</span><span class="nf">elseif</span> <span class="nv">$foo</span> <span class="o">===</span> <span class="s1">&#39;baz&#39;</span><span class="cp">}</span><span class="x"></span>
2554 <span class="x">    foo is baz</span>
2555 <span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x"></span>
2556 <span class="x">    foo is neither bar nor baz</span>
2557 <span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2558 </code></pre></div>
2559 </td></tr></table>
2560 <p>The supported operators in conditions are <code>===</code>, <code>!==</code>, <code>==</code>, <code>!=</code>, <code>&lt;=</code>, <code>&lt;</code>, <code>&gt;=</code>, <code>&gt;</code>, <code>||</code>, <code>&amp;&amp;</code>, <code>!</code>, and <code>=</code>.</p>
2561 <p>More examples:</p>
2562 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2563 <span class="normal">2</span>
2564 <span class="normal">3</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">if</span> <span class="nv">$bar</span><span class="o">|</span><span class="na">isset</span><span class="cp">}</span><span class="x">…</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2565
2566 <span class="cp">{</span><span class="nf">if</span> <span class="nv">$bar</span><span class="o">|</span><span class="na">count</span> <span class="o">&gt;</span> <span class="m">3</span> <span class="o">&amp;&amp;</span> <span class="nv">$bar</span><span class="o">|</span><span class="na">count</span> <span class="o">&lt;</span> <span class="m">100</span><span class="cp">}</span><span class="x">…</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2567 </code></pre></div>
2568 </td></tr></table>
2569 <h3 id="foreach-loops">Foreach Loops<a class="headerlink" href="#foreach-loops" title="Permanent link">#</a></h3>
2570 <p>Foreach loops allow to iterate over arrays or iterable objects:</p>
2571 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2572 <span class="normal">2</span>
2573 <span class="normal">3</span>
2574 <span class="normal">4</span>
2575 <span class="normal">5</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="x">&lt;ul&gt;</span>
2576 <span class="x">    </span><span class="cp">{</span><span class="nf">foreach</span> <span class="na">from</span><span class="o">=</span><span class="nv">$array</span> <span class="na">key</span><span class="o">=</span><span class="na">key</span> <span class="na">item</span><span class="o">=</span><span class="na">value</span><span class="cp">}</span><span class="x"></span>
2577 <span class="x">        &lt;li&gt;</span><span class="cp">{</span><span class="nv">$key</span><span class="cp">}</span><span class="x">: </span><span class="cp">{</span><span class="nv">$value</span><span class="cp">}</span><span class="x">&lt;/li&gt;</span>
2578 <span class="x">    </span><span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
2579 <span class="x">&lt;/ul&gt;</span>
2580 </code></pre></div>
2581 </td></tr></table>
2582 <p>While the <code>from</code> attribute containing the iterated structure and the <code>item</code> attribute containg the current value are mandatory, the <code>key</code> attribute is optional.
2583 If the foreach loop has a name assigned to it via the <code>name</code> attribute, the <code>$tpl</code> template variable provides additional data about the loop:</p>
2584 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2585 <span class="normal"> 2</span>
2586 <span class="normal"> 3</span>
2587 <span class="normal"> 4</span>
2588 <span class="normal"> 5</span>
2589 <span class="normal"> 6</span>
2590 <span class="normal"> 7</span>
2591 <span class="normal"> 8</span>
2592 <span class="normal"> 9</span>
2593 <span class="normal">10</span>
2594 <span class="normal">11</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="x">&lt;ul&gt;</span>
2595 <span class="x">    </span><span class="cp">{</span><span class="nf">foreach</span> <span class="na">from</span><span class="o">=</span><span class="nv">$array</span> <span class="na">key</span><span class="o">=</span><span class="na">key</span> <span class="na">item</span><span class="o">=</span><span class="na">value</span> <span class="na">name</span><span class="o">=</span><span class="na">foo</span><span class="cp">}</span><span class="x"></span>
2596 <span class="x">        </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$tpl</span><span class="o">[</span><span class="na">foreach</span><span class="o">][</span><span class="na">foo</span><span class="o">][</span><span class="na">first</span><span class="o">]</span><span class="cp">}</span><span class="x"></span>
2597 <span class="x">            something special for the first iteration</span>
2598 <span class="x">        </span><span class="cp">{</span><span class="nf">elseif</span> <span class="nv">$tpl</span><span class="o">[</span><span class="na">foreach</span><span class="o">][</span><span class="na">foo</span><span class="o">][</span><span class="na">last</span><span class="o">]</span><span class="cp">}</span><span class="x"></span>
2599 <span class="x">            something special for the last iteration</span>
2600 <span class="x">        </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2601
2602 <span class="x">        &lt;li&gt;iteration </span><span class="cp">{</span><span class="err">#</span><span class="nv">$tpl</span><span class="o">[</span><span class="na">foreach</span><span class="o">][</span><span class="na">foo</span><span class="o">][</span><span class="na">iteration</span><span class="o">]+</span><span class="m">1</span><span class="cp">}</span><span class="x"> out of </span><span class="cp">{</span><span class="err">#</span><span class="nv">$tpl</span><span class="o">[</span><span class="na">foreach</span><span class="o">][</span><span class="na">foo</span><span class="o">][</span><span class="na">total</span><span class="o">]</span><span class="cp">}</span><span class="x"> </span><span class="cp">{</span><span class="nv">$key</span><span class="cp">}</span><span class="x">: </span><span class="cp">{</span><span class="nv">$value</span><span class="cp">}</span><span class="x">&lt;/li&gt;</span>
2603 <span class="x">    </span><span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
2604 <span class="x">&lt;/ul&gt;</span>
2605 </code></pre></div>
2606 </td></tr></table>
2607 <p>In contrast to PHP’s foreach loop, templates also support <code>foreachelse</code>:</p>
2608 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2609 <span class="normal">2</span>
2610 <span class="normal">3</span>
2611 <span class="normal">4</span>
2612 <span class="normal">5</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">foreach</span> <span class="na">from</span><span class="o">=</span><span class="nv">$array</span> <span class="na">item</span><span class="o">=</span><span class="na">value</span><span class="cp">}</span><span class="x"></span>
2613 <span class="x">    …</span>
2614 <span class="cp">{</span><span class="nf">foreachelse</span><span class="cp">}</span><span class="x"></span>
2615 <span class="x">    there is nothing to iterate over</span>
2616 <span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
2617 </code></pre></div>
2618 </td></tr></table>
2619 <h3 id="including-other-templates">Including Other Templates<a class="headerlink" href="#including-other-templates" title="Permanent link">#</a></h3>
2620 <p>To include template named <code>foo</code> from the same domain (frontend/backend), you can use</p>
2621 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;foo&#39;</span><span class="cp">}</span><span class="x"></span>
2622 </code></pre></div>
2623 </td></tr></table>
2624 <p>If the template belongs to an application, you have to specify that application using the <code>application</code> attribute:</p>
2625 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;foo&#39;</span> <span class="na">application</span><span class="o">=</span><span class="s1">&#39;app&#39;</span><span class="cp">}</span><span class="x"></span>
2626 </code></pre></div>
2627 </td></tr></table>
2628 <p>Additional template variables can be passed to the included template as additional attributes:</p>
2629 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;foo&#39;</span> <span class="na">application</span><span class="o">=</span><span class="s1">&#39;app&#39;</span> <span class="na">var1</span><span class="o">=</span><span class="s1">&#39;foo1&#39;</span> <span class="na">var2</span><span class="o">=</span><span class="s1">&#39;foo2&#39;</span><span class="cp">}</span><span class="x"></span>
2630 </code></pre></div>
2631 </td></tr></table>
2632 <h3 id="template-plugins">Template Plugins<a class="headerlink" href="#template-plugins" title="Permanent link">#</a></h3>
2633 <p>An overview of all available template plugins can be found <a href="../template-plugins/">here</a>.</p>
2634
2635
2636
2637
2638 <hr>
2639 <div class="md-source-date">
2640   <small>
2641
2642       Last update: 2021-01-15
2643
2644   </small>
2645 </div>
2646
2647
2648
2649
2650
2651
2652
2653
2654             </article>
2655           </div>
2656         </div>
2657
2658       </main>
2659
2660
2661 <footer class="md-footer">
2662
2663     <nav class="md-footer__inner md-grid" aria-label="Footer">
2664
2665         <a href="../languages/" class="md-footer__link md-footer__link--prev" rel="prev">
2666           <div class="md-footer__button md-icon">
2667             <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>
2668           </div>
2669           <div class="md-footer__title">
2670             <div class="md-ellipsis">
2671               <span class="md-footer__direction">
2672                 Previous
2673               </span>
2674               Languages
2675             </div>
2676           </div>
2677         </a>
2678
2679
2680         <a href="../template-plugins/" class="md-footer__link md-footer__link--next" rel="next">
2681           <div class="md-footer__title">
2682             <div class="md-ellipsis">
2683               <span class="md-footer__direction">
2684                 Next
2685               </span>
2686               Template Plugins
2687             </div>
2688           </div>
2689           <div class="md-footer__button md-icon">
2690             <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>
2691           </div>
2692         </a>
2693
2694     </nav>
2695
2696   <div class="md-footer-meta md-typeset">
2697     <div class="md-footer-meta__inner md-grid">
2698       <div class="md-footer-copyright">
2699
2700           <div class="md-footer-copyright__highlight">
2701             Copyright © 2020 WoltLab GmbH
2702           </div>
2703
2704         Made with
2705         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2706           Material for MkDocs
2707         </a>
2708
2709       </div>
2710       <div class="md-footer-copyright">
2711         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2712         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2713 </div>
2714     </div>
2715   </div>
2716 </footer>
2717
2718     </div>
2719     <div class="md-dialog" data-md-component="dialog">
2720       <div class="md-dialog__inner md-typeset"></div>
2721     </div>
2722     <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2723
2724
2725       <script src="../../assets/javascripts/bundle.4ea5477f.min.js"></script>
2726
2727
2728   </body>
2729 </html>