[GitHub/WoltLab/woltlab.github.io.git] / 6.0 / javascript / components_confirmation / index.html


<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
        <link rel="canonical" href="https://docs.woltlab.com/6.0/javascript/components_confirmation/">
      
      
        <link rel="prev" href="../typescript/">
      
      
        <link rel="next" href="../components_dialog/">
      
      <link rel="icon" href="../../assets/default.favicon.ico">
      <meta name="generator" content="mkdocs-1.4.3, mkdocs-material-9.1.15">
    
    
        <title>Confirmation - WoltLab Suite Documentation</title>
      
    
      <link rel="stylesheet" href="../../assets/stylesheets/main.26e3688c.min.css">
      
        
        <link rel="stylesheet" href="../../assets/stylesheets/palette.ecc896b0.min.css">
      
      
      <link rel="stylesheet" href="../../stylesheets/extra.css">
    
    <script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
  </head>
  
  
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="teal" data-md-color-accent="indigo">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#confirmation-javascript-api" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
        <aside class="md-banner">
          <div class="md-banner__inner md-grid md-typeset">
            
            
    <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>

          </div>
          
        </aside>
      
    </div>
    
      <div data-md-color-scheme="default" data-md-component="outdated" hidden>
        
      </div>
    
    
<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
      
  <img src="../../assets/logo.png" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            WoltLab Suite Documentation
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Confirmation
            
          </span>
        </div>
      </div>
    </div>
    
      
      <label class="md-header__button md-icon" for="__search">
        <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>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <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" required>
      <label class="md-search__icon md-icon" for="__search">
        <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>
        <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>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          <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>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><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>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
      
  <img src="../../assets/logo.png" alt="logo">

    </a>
    WoltLab Suite Documentation
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><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>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
    <li class="md-nav__item">
      <a href="../../getting-started/" class="md-nav__link">
        Getting Started
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
      
      
        <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
          PHP API
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_2">
          <span class="md-nav__icon md-icon"></span>
          PHP API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../php/pages/" class="md-nav__link">
        Pages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/database-objects/" class="md-nav__link">
        Database Objects
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/database-access/" class="md-nav__link">
        Database Access
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/exceptions/" class="md-nav__link">
        Exceptions
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5" >
      
      
        <label class="md-nav__link" for="__nav_2_5" id="__nav_2_5_label" tabindex="0">
          API
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_2_5">
          <span class="md-nav__icon md-icon"></span>
          API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5_1" >
      
      
        <label class="md-nav__link" for="__nav_2_5_1" id="__nav_2_5_1_label" tabindex="0">
          Caches
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_5_1_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_2_5_1">
          <span class="md-nav__icon md-icon"></span>
          Caches
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../php/api/caches/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
        Persistent Caches
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
        Runtime Caches
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/comments/" class="md-nav__link">
        Comments
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/cronjobs/" class="md-nav__link">
        Cronjobs
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/events/" class="md-nav__link">
        Events
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5_5" >
      
      
        <label class="md-nav__link" for="__nav_2_5_5" id="__nav_2_5_5_label" tabindex="0">
          Form Builder
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_5_5_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_2_5_5">
          <span class="md-nav__icon md-icon"></span>
          Form Builder
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../php/api/form_builder/overview/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/form_builder/structure/" class="md-nav__link">
        Structure
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
        Fields
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
        Validation and Data
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
        Dependencies
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
        Package Installation Plugins
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/user_activity_points/" class="md-nav__link">
        User Activity Points
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/user_notifications/" class="md-nav__link">
        User Notifications
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/sitemaps/" class="md-nav__link">
        Sitemaps
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/code-style/" class="md-nav__link">
        Code Style
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/apps/" class="md-nav__link">
        Apps
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/gdpr/" class="md-nav__link">
        GDPR
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
      
      
        <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
          Languages, Templates & CSS
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_3">
          <span class="md-nav__icon md-icon"></span>
          Languages, Templates & CSS
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../view/languages/" class="md-nav__link">
        Languages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../view/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../view/template-modifiers/" class="md-nav__link">
        Template Modifiers
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../view/template-plugins/" class="md-nav__link">
        Template Plugins
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../view/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked>
      
      
        <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
          TypeScript and JavaScript API
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true">
        <label class="md-nav__title" for="__nav_4">
          <span class="md-nav__icon md-icon"></span>
          TypeScript and JavaScript API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../general-usage/" class="md-nav__link">
        General Usage
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../typescript/" class="md-nav__link">
        TypeScript
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3" checked>
      
      
        <label class="md-nav__link" for="__nav_4_3" id="__nav_4_3_label" tabindex="0">
          Components
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_3_label" aria-expanded="true">
        <label class="md-nav__title" for="__nav_4_3">
          <span class="md-nav__icon md-icon"></span>
          Components
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          Confirmation
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        Confirmation
      </a>
      
        
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#example" class="md-nav__link">
    Example
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#when-to-use" class="md-nav__link">
    When to Use
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#proper-wording" class="md-nav__link">
    Proper Wording
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#available-presets" class="md-nav__link">
    Available Presets
  </a>
  
    <nav class="md-nav" aria-label="Available Presets">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#soft-delete" class="md-nav__link">
    Soft Delete
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#restore" class="md-nav__link">
    Restore
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#delete" class="md-nav__link">
    Delete
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#custom-confirmation-prompts" class="md-nav__link">
    Custom Confirmation Prompts
  </a>
  
    <nav class="md-nav" aria-label="Custom Confirmation Prompts">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#use-custom-html-in-the-dialog-body" class="md-nav__link">
    Use Custom HTML in the Dialog Body
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

    <li class="md-nav__item">
      <a href="../components_dialog/" class="md-nav__link">
        Dialog
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../components_google_maps/" class="md-nav__link">
        Google Maps
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../components_pagination/" class="md-nav__link">
        Pagination
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_4" >
      
      
        <label class="md-nav__link" for="__nav_4_4" id="__nav_4_4_label" tabindex="0">
          New API
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_4_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_4_4">
          <span class="md-nav__icon md-icon"></span>
          New API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../new-api_writing-a-module/" class="md-nav__link">
        Writing a module
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_core/" class="md-nav__link">
        Core Functions
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_dom/" class="md-nav__link">
        DOM
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_events/" class="md-nav__link">
        Event Handling
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_ajax/" class="md-nav__link">
        Ajax
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_dialogs/" class="md-nav__link">
        Dialogs
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_browser/" class="md-nav__link">
        Browser and Screen Sizes
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_ui/" class="md-nav__link">
        User Interface
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../legacy-api/" class="md-nav__link">
        Legacy API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../code-snippets/" class="md-nav__link">
        Code Snippets
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
      
      
        <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
          Package Components
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_5">
          <span class="md-nav__icon md-icon"></span>
          Package Components
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../package/package-xml/" class="md-nav__link">
        package.xml
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" >
      
      
        <label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0">
          PIPs
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_5_2">
          <span class="md-nav__icon md-icon"></span>
          PIPs
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../package/pip/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/acl-option/" class="md-nav__link">
        aclOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/acp-menu/" class="md-nav__link">
        acpMenu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
        acpSearchProvider
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/acp-template/" class="md-nav__link">
        acpTemplate
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/acp-template-delete/" class="md-nav__link">
        acpTemplateDelete
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/bbcode/" class="md-nav__link">
        bbcode
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/box/" class="md-nav__link">
        box
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/clipboard-action/" class="md-nav__link">
        clipboardAction
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/core-object/" class="md-nav__link">
        coreObject
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/cronjob/" class="md-nav__link">
        cronjob
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/database/" class="md-nav__link">
        database
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/event-listener/" class="md-nav__link">
        eventListener
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/file/" class="md-nav__link">
        file
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/file-delete/" class="md-nav__link">
        fileDelete
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/language/" class="md-nav__link">
        language
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/media-provider/" class="md-nav__link">
        mediaProvider
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/menu/" class="md-nav__link">
        menu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/menu-item/" class="md-nav__link">
        menuItem
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/object-type/" class="md-nav__link">
        objectType
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/object-type-definition/" class="md-nav__link">
        objectTypeDefinition
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/option/" class="md-nav__link">
        option
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/page/" class="md-nav__link">
        page
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/pip/" class="md-nav__link">
        pip
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/script/" class="md-nav__link">
        script
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/smiley/" class="md-nav__link">
        smiley
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/sql/" class="md-nav__link">
        sql
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/style/" class="md-nav__link">
        style
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/template/" class="md-nav__link">
        template
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/template-delete/" class="md-nav__link">
        templateDelete
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/template-listener/" class="md-nav__link">
        templateListener
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/user-group-option/" class="md-nav__link">
        userGroupOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/user-menu/" class="md-nav__link">
        userMenu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/user-notification-event/" class="md-nav__link">
        userNotificationEvent
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/user-option/" class="md-nav__link">
        userOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
        userProfileMenu
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/database-php-api/" class="md-nav__link">
        Database PHP API
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
      
      
        <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
          Migration
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_6">
          <span class="md-nav__icon md-icon"></span>
          Migration
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" >
      
      
        <label class="md-nav__link" for="__nav_6_1" id="__nav_6_1_label" tabindex="0">
          From WoltLab Suite 5.5
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_6_1">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 5.5
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wsc55/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc55/javascript/" class="md-nav__link">
        TypeScript and JavaScript
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc55/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc55/icons/" class="md-nav__link">
        Icons
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc55/dialogs/" class="md-nav__link">
        Dialogs
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc55/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc55/deprecations_removals/" class="md-nav__link">
        Deprecations and Removals
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" >
      
      
        <label class="md-nav__link" for="__nav_6_2" id="__nav_6_2_label" tabindex="0">
          From WoltLab Suite 5.4
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_6_2">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 5.4
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wsc54/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc54/javascript/" class="md-nav__link">
        TypeScript and JavaScript
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc54/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc54/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc54/deprecations_removals/" class="md-nav__link">
        Deprecations and Removals
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3" >
      
      
        <label class="md-nav__link" for="__nav_6_3" id="__nav_6_3_label" tabindex="0">
          From WoltLab Suite 5.3
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_3_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_6_3">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 5.3
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wsc53/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc53/session/" class="md-nav__link">
        Session Handling and Authentication
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc53/javascript/" class="md-nav__link">
        TypeScript and JavaScript
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc53/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc53/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_4" >
      
      
        <label class="md-nav__link" for="__nav_6_4" id="__nav_6_4_label" tabindex="0">
          From WoltLab Suite 5.2
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_4_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_6_4">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 5.2
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wsc52/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc52/templates/" class="md-nav__link">
        Templates and Languages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc52/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_5" >
      
      
        <label class="md-nav__link" for="__nav_6_5" id="__nav_6_5_label" tabindex="0">
          From WoltLab Suite 3.1
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_5_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_6_5">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 3.1
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wsc31/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_6" >
      
      
        <label class="md-nav__link" for="__nav_6_6" id="__nav_6_6_label" tabindex="0">
          From WoltLab Suite 3.0
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_6_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_6_6">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 3.0
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wsc30/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc30/javascript/" class="md-nav__link">
        JavaScript API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc30/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc30/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc30/package/" class="md-nav__link">
        Package Components
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_7" >
      
      
        <label class="md-nav__link" for="__nav_6_7" id="__nav_6_7_label" tabindex="0">
          From WCF 2.1
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_7_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_6_7">
          <span class="md-nav__icon md-icon"></span>
          From WCF 2.1
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wcf21/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wcf21/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wcf21/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wcf21/package/" class="md-nav__link">
        Package Components
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
      
      
        <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
          Tutorials
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_7">
          <span class="md-nav__icon md-icon"></span>
          Tutorials
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_1" >
      
      
        <label class="md-nav__link" for="__nav_7_1" id="__nav_7_1_label" tabindex="0">
          Tutorial Series
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_1_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_7_1">
          <span class="md-nav__icon md-icon"></span>
          Tutorial Series
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../tutorial/series/overview/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../tutorial/series/part_1/" class="md-nav__link">
        Part 1
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../tutorial/series/part_2/" class="md-nav__link">
        Part 2
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../tutorial/series/part_3/" class="md-nav__link">
        Part 3
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../tutorial/series/part_4/" class="md-nav__link">
        Part 4
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../tutorial/series/part_5/" class="md-nav__link">
        Part 5
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../tutorial/series/part_6/" class="md-nav__link">
        Part 6
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

        </ul>
      </nav>
    </li>
  

  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#example" class="md-nav__link">
    Example
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#when-to-use" class="md-nav__link">
    When to Use
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#proper-wording" class="md-nav__link">
    Proper Wording
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#available-presets" class="md-nav__link">
    Available Presets
  </a>
  
    <nav class="md-nav" aria-label="Available Presets">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#soft-delete" class="md-nav__link">
    Soft Delete
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#restore" class="md-nav__link">
    Restore
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#delete" class="md-nav__link">
    Delete
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#custom-confirmation-prompts" class="md-nav__link">
    Custom Confirmation Prompts
  </a>
  
    <nav class="md-nav" aria-label="Custom Confirmation Prompts">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#use-custom-html-in-the-dialog-body" class="md-nav__link">
    Use Custom HTML in the Dialog Body
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  
<h1 id="confirmation-javascript-api">Confirmation - JavaScript API<a class="headerlink" href="#confirmation-javascript-api" title="Permanent link">#</a></h1>
<p>The purpose of confirmation dialogs is to prevent misclicks and to inform the user of potential consequences of their action.
A confirmation dialog should always ask a concise question that includes a reference to the object the action is performed upon.</p>
<p>You can exclude extra information or form elements in confirmation dialogs, but these should be kept as compact as possible.</p>
<h2 id="example">Example<a class="headerlink" href="#example" title="Permanent link">#</a></h2>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
<span class="normal">2</span>
<span class="normal">3</span>
<span class="normal">4</span>
<span class="normal">5</span>
<span class="normal">6</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">result</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">confirmationFactory</span><span class="p">()</span>
<span class="w">  </span><span class="p">.</span><span class="nx">custom</span><span class="p">(</span><span class="s2">&quot;Do you want a cookie?&quot;</span><span class="p">)</span>
<span class="w">  </span><span class="p">.</span><span class="nx">withoutMessage</span><span class="p">();</span>
<span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="c1">// User has confirmed the dialog.</span>
<span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p>Confirmation dialogs are a special type that use the <code>role="alertdialog"</code> attribute and will always include a cancel button.
The dialog itself will be limited to a width of 500px, the title can wrap into multiple lines and there will be no “X” button to close the dialog.</p>
<h2 id="when-to-use">When to Use<a class="headerlink" href="#when-to-use" title="Permanent link">#</a></h2>
<p>Over the past few years the term “Confirmation Fatique” has emerged that describes the issue of having too many confirmation dialogs even there is no real need for them.
A confirmation dialog should only be displayed when the action requires further inputs, for example, a soft delete that requires a reason, or when the action is destructive.</p>
<h2 id="proper-wording">Proper Wording<a class="headerlink" href="#proper-wording" title="Permanent link">#</a></h2>
<p>The confirmation question should hint the severity of the action, in particular whether or not it is destructive.
Destructive actions are those that cannot be undone and either cause a permanent mutation or that cause data loss.
All questions should be phrased in one or two ways depending on the action.</p>
<p>Destructive action:</p>
<blockquote>
<p>Are you sure you want to delete “Example Object”?
(German) Wollen Sie „Beispiel-Objekt“ wirklich löschen?</p>
</blockquote>
<p>All other actions:</p>
<blockquote>
<p>Do you want to move “Example Object” to the trash bin?
(German) Möchten Sie „Beispiel-Objekt“ in den Papierkorb verschieben?</p>
</blockquote>
<h2 id="available-presets">Available Presets<a class="headerlink" href="#available-presets" title="Permanent link">#</a></h2>
<p>WoltLab Suite 6.0 currently ships with three presets for common confirmation dialogs.</p>
<p>All three presets have an optional parameter for the title of the related object as part of the question asked to the user.
It is strongly recommended to provide the title if it exists, otherwise it can be omitted and an indeterminate variant is used instead.</p>
<h3 id="soft-delete">Soft Delete<a class="headerlink" href="#soft-delete" title="Permanent link">#</a></h3>
<p>Soft deleting objects with an optional input field for a reason:</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
<span class="normal"> 2</span>
<span class="normal"> 3</span>
<span class="normal"> 4</span>
<span class="normal"> 5</span>
<span class="normal"> 6</span>
<span class="normal"> 7</span>
<span class="normal"> 8</span>
<span class="normal"> 9</span>
<span class="normal">10</span>
<span class="normal">11</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">askForReason</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">result</span><span class="p">,</span><span class="w"> </span><span class="nx">reason</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">confirmationFactory</span><span class="p">().</span><span class="nx">softDelete</span><span class="p">(</span>
<span class="w">  </span><span class="nx">theObjectName</span><span class="p">,</span>
<span class="w">  </span><span class="nx">askForReason</span>
<span class="p">);</span>
<span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span>
<span class="w">    </span><span class="s2">&quot;The user has requested a soft delete, the following reason was provided:&quot;</span><span class="p">,</span>
<span class="w">    </span><span class="nx">reason</span>
<span class="w">  </span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p>The <code>reason</code> will always be a string, but with a length of zero if the <code>result</code> is <code>false</code> or if no reason was requested.
You can simply omit the value if you do not use the reason.</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
<span class="normal">2</span>
<span class="normal">3</span>
<span class="normal">4</span>
<span class="normal">5</span>
<span class="normal">6</span>
<span class="normal">7</span>
<span class="normal">8</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">askForReason</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">result</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">confirmationFactory</span><span class="p">().</span><span class="nx">softDelete</span><span class="p">(</span>
<span class="w">  </span><span class="nx">theObjectName</span><span class="p">,</span>
<span class="w">  </span><span class="nx">askForReason</span>
<span class="p">);</span>
<span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;The user has requested a soft delete.&quot;</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="restore">Restore<a class="headerlink" href="#restore" title="Permanent link">#</a></h3>
<p>Restore a previously soft deleted object:</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
<span class="normal">2</span>
<span class="normal">3</span>
<span class="normal">4</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">result</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">confirmationFactory</span><span class="p">().</span><span class="nx">restore</span><span class="p">(</span><span class="nx">theObjectName</span><span class="p">);</span>
<span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;The user has requested to restore the object.&quot;</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="delete">Delete<a class="headerlink" href="#delete" title="Permanent link">#</a></h3>
<p>Permanently delete an object, will inform the user that the action cannot be undone:</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
<span class="normal">2</span>
<span class="normal">3</span>
<span class="normal">4</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">result</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">confirmationFactory</span><span class="p">().</span><span class="ow">delete</span><span class="p">(</span><span class="nx">theObjectName</span><span class="p">);</span>
<span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;The user has requested to delete the object.&quot;</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="custom-confirmation-prompts">Custom Confirmation Prompts<a class="headerlink" href="#custom-confirmation-prompts" title="Permanent link">#</a></h2>
<p>The <code>custom()</code> permits a custom confirmation dialog with a user-defined dialog content.</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
<span class="normal">2</span>
<span class="normal">3</span>
<span class="normal">4</span>
<span class="normal">5</span>
<span class="normal">6</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">result</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">confirmationFactory</span><span class="p">()</span>
<span class="w">  </span><span class="p">.</span><span class="nx">custom</span><span class="p">(</span><span class="nx">theQuestionToAsk</span><span class="p">)</span>
<span class="w">  </span><span class="p">.</span><span class="nx">message</span><span class="p">(</span><span class="nx">someLengthyExplanation</span><span class="p">);</span>
<span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;The user has confirmed the dialog.&quot;</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="use-custom-html-in-the-dialog-body">Use Custom HTML in the Dialog Body<a class="headerlink" href="#use-custom-html-in-the-dialog-body" title="Permanent link">#</a></h3>
<p>Some dialogs require additional input elements, for example, the prompt to remove an element has an optional text field for a reason.</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
<span class="normal"> 2</span>
<span class="normal"> 3</span>
<span class="normal"> 4</span>
<span class="normal"> 5</span>
<span class="normal"> 6</span>
<span class="normal"> 7</span>
<span class="normal"> 8</span>
<span class="normal"> 9</span>
<span class="normal">10</span>
<span class="normal">11</span>
<span class="normal">12</span>
<span class="normal">13</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">result</span><span class="p">,</span><span class="w"> </span><span class="nx">dialog</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">confirmationFactory</span><span class="p">()</span>
<span class="w">  </span><span class="p">.</span><span class="nx">custom</span><span class="p">(</span><span class="nx">theQuestionToAsk</span><span class="p">)</span>
<span class="w">  </span><span class="p">.</span><span class="nx">withFormElements</span><span class="p">((</span><span class="nx">dialog</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">p</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;&lt;p&gt;Hello World&lt;/p&gt;&quot;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">p</span><span class="p">);</span>
<span class="w">  </span><span class="p">});</span>
<span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;The user has confirmed the dialog.&quot;</span><span class="p">);</span>
<span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span>
<span class="w">    </span><span class="s2">&quot;The DOM of the dialog can be accessed through `dialog.content`&quot;</span><span class="p">,</span>
<span class="w">    </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">content</span>
<span class="w">  </span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></td></tr></table></div>

  <hr>
<div class="md-source-file">
  <small>
    
      Last update:
      2023-05-17
    
  </small>
</div>


              </article>
            </div>
          
          
        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright © 2020 WoltLab GmbH
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
        <div class="md-copyright">
	<a href="https://www.woltlab.com/legal-notice/">Legal Notice</a> 
	<a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    <script id="__config" type="application/json">{"base": "../..", "features": ["navigation.tracking"], "search": "../../assets/javascripts/workers/search.208ed371.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script>
    
    
      <script src="../../assets/javascripts/bundle.b4d07000.min.js"></script>
      
    
  </body>
</html>