Dialog
When to use a dialog?
You should use a dialog, when you need the user to focus on one information, action or task. Dialogs interrupt the user’s task flow, so make sure it’s important enough.
Good examples on when to use a dialog: alerts, confirmations, a single setting with just a few fields.
Bad examples on when to use a dialog: whole workflow steps, tasks that the user can resume doing later.
Default
<e-dialoghandler class="e-btn" dialog="#dialog-default">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-default" headline="Dialog Title">
<p>
Adipiscing ipsum duis, in in mollit, fugiat in non sit? Elit, nisi ad ad excepteur incididunt, incididunt, eu quis. Ipsum aute ea, est sunt magna, ut consectetur anim consequat. In laboris aliqua, ex proident cillum voluptate in, tempor exercitation? Deserunt in, magna amet nulla proident magna eiusmod?
</p>
<p>
Exercitation eiusmod laboris nulla labore duis minim eiusmod velit, enim, in. Dolor sint ea est. Est deserunt ipsum dolore, amet? Sunt do ex esse do exercitation anim ut dolor in culpa sit ex aliquip, magna ipsum.
</p>
</e-dialog><e-dialoghandler class="e-btn" dialog="#dialog-default">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-default" headline="Dialog Title">
<p>
Excepteur labore fugiat magna ut adipiscing, sit do, cupidatat consectetur? Veniam dolor dolore, ea nulla, in dolor deserunt officia sunt. Labore ex duis duis exercitation, sunt qui et dolore est, deserunt.
</p>
<p>
Exercitation dolore labore tempor enim ut velit laboris esse, tempor. In, ut, lorem, amet anim sed eu sed voluptate adipiscing in. In, minim non sed nostrud fugiat et. Duis mollit dolor minim esse laborum ut magna in. Quis do occaecat excepteur non adipiscing fugiat, enim aliqua laborum laboris consectetur.
</p>
</e-dialog>JavaScript
Ipsum velit deserunt voluptate et culpa. Labore, elit, do nisi proident, incididunt ullamco adipiscing laboris. Pariatur laboris veniam dolor ex id magna excepteur voluptate, ut. Ut, velit quis in aute in est nostrud, dolore. Eiusmod, in in anim ullamco do laboris, mollit laboris dolore incididunt in quis anim ut? Ullamco mollit consequat irure laborum nisi duis, dolor minim adipiscing incididunt? Enim cupidatat, fugiat veniam, eu incididunt lorem nulla minim irure velit, do ut?
Pariatur fugiat consectetur sed, aute, dolor, enim, anim minim enim. Nisi in aliquip elit ex cillum id fugiat in in cillum eiusmod fugiat ullamco? Excepteur in irure laborum, occaecat, esse commodo exercitation sed aliqua. Aliquip sed, consequat culpa, cillum deserunt elit? Cupidatat, sed minim excepteur et irure irure est dolor. In ad, deserunt magna ipsum est eiusmod dolor labore veniam. Aliquip aliquip id, fugiat velit, culpa, in duis labore, aliquip fugiat irure cupidatat.
Component Variation
Disable keyboard actions
<e-dialoghandler class="e-btn" dialog="#dialog-nokeys">
Open Dialog (no-keys)
</e-dialoghandler>
<e-dialog id="dialog-nokeys" headline="Dialog Title" no-keys="true">
<p>
Laboris mollit ipsum do quis in quis sint? Mollit, dolor, sed sit veniam, proident tempor excepteur ex id officia. Officia, qui laboris incididunt nisi ut quis tempor, mollit do non. Laboris, enim in, ad dolore quis lorem, elit qui ad non. Labore, commodo qui aute aliquip ex ut consectetur. Nostrud aliqua consequat sunt, aliquip aliquip nostrud, mollit ipsum.
</p>
<p>
Cillum adipiscing, cupidatat veniam amet, proident in officia et ad? Sunt officia ipsum consectetur non reprehenderit. Ex culpa sit, sunt aute, in ut ut, tempor cillum, cupidatat, laborum deserunt. Commodo laborum, ut fugiat aliquip deserunt est laboris occaecat.
</p>
</e-dialog><e-dialoghandler class="e-btn" dialog="#dialog-nokeys">
Open Dialog (no-keys)
</e-dialoghandler>
<e-dialog id="dialog-nokeys" headline="Dialog Title" no-keys="true">
<p>
Amet sit in, mollit ut aliquip, eiusmod consectetur voluptate, deserunt in amet. Minim in ullamco aliquip ut elit fugiat. Cupidatat, mollit eiusmod ut, ut qui aliqua excepteur dolor, cillum, mollit dolore. Cupidatat laborum anim enim, mollit consequat nisi dolore in enim voluptate elit irure. Proident, laborum, officia, mollit non, nisi esse incididunt. Dolore, est, duis non, voluptate adipiscing, nisi officia dolor?
</p>
<p>
Nisi ut voluptate laborum nisi, mollit ut do in. Non tempor commodo dolor, lorem labore, ut. Eiusmod minim nulla, nisi tempor laborum, incididunt commodo ut. Duis commodo dolore nisi duis, mollit officia.
</p>
</e-dialog>JavaScript
Voluptate, et consectetur sunt adipiscing ea proident ut tempor. Culpa esse eiusmod incididunt quis laborum, in officia ut officia ad consectetur. Duis, deserunt ut culpa sunt ipsum commodo dolore. Sed est incididunt deserunt consequat, consectetur velit cupidatat. Sunt ut qui voluptate?
Dolore culpa, mollit, mollit, nisi quis ipsum dolore pariatur consequat, pariatur aliqua dolore? Esse ut nisi qui, irure ullamco, labore ad, minim. Lorem laboris reprehenderit, esse duis enim minim sint anim aliqua sit.
Not closable (with data-action="close")
<e-dialoghandler class="e-btn" dialog="#dialog-noclose">
Open Dialog (no-close)
</e-dialoghandler>
<e-dialog id="dialog-noclose" headline="Dialog Title" no-close="true">
<p>
Qui labore labore, dolor proident fugiat adipiscing fugiat. Commodo ut, nulla dolor sunt do id fugiat in lorem. Laborum aliquip ipsum, exercitation sit in, adipiscing labore nisi, amet sint.
</p>
<p>
Reprehenderit, ut in esse, incididunt cillum id non. Aliqua duis occaecat sit dolore irure ea. Adipiscing, amet, cillum ipsum consequat non nulla esse dolor esse nulla excepteur, veniam fugiat. Aliquip aliquip tempor, duis excepteur anim esse ex, magna, in ea aliqua. Occaecat magna labore consequat ipsum dolor? Enim id consectetur magna officia, ut ex excepteur, minim duis anim?
</p>
<a href="javascript:void(0)" data-action="close">
Close This
</a>
</e-dialog><e-dialoghandler class="e-btn" dialog="#dialog-noclose">
Open Dialog (no-close)
</e-dialoghandler>
<e-dialog id="dialog-noclose" headline="Dialog Title" no-close="true">
<p>
Aliqua, cillum culpa, nostrud aliqua ad, culpa irure? Est, consectetur aliquip dolore, pariatur nisi, ipsum exercitation, cillum? Culpa, exercitation esse ut officia aliqua in, minim, in, cupidatat. Minim occaecat sed quis deserunt veniam, enim.
</p>
<p>
Cupidatat amet irure ut culpa sunt nulla. Nulla sint lorem sunt ea, est, dolor, adipiscing. Dolor, anim tempor, exercitation non anim dolor. In ut adipiscing, laborum aliqua enim laborum cupidatat aliqua dolor, voluptate eiusmod officia, laborum, sint. Cillum irure proident enim ex dolore, cupidatat dolore dolor culpa in eu qui duis in. Ipsum, veniam, enim dolor dolor labore aliqua nostrud veniam? Lorem lorem ut anim, ut cupidatat, laboris, ut ut consequat?
</p>
<a href="javascript:void(0)" data-action="close">
Close This
</a>
</e-dialog>JavaScript
Esse eu, amet, do. Tempor in nostrud pariatur, excepteur culpa ex aute, ullamco minim duis labore lorem ut. Id, velit, amet ipsum, ea, aute lorem, in laboris officia? Proident ut nostrud, consequat, ut excepteur est, ex adipiscing reprehenderit, laborum. Nulla labore proident laborum, in minim in nostrud ut.
Ea incididunt, reprehenderit tempor ea adipiscing officia proident sit, laborum. Proident tempor, eu proident excepteur ea dolor reprehenderit? Fugiat do sit est deserunt amet. Laborum aliqua ipsum mollit, sit voluptate commodo, irure? Aliquip mollit duis nulla dolore, velit aliquip, lorem ipsum, pariatur ex cillum deserunt. Consectetur laborum laborum ut, consequat. Quis eiusmod ea irure id consectetur cillum laborum in laboris amet.
Close ThisAuto focus
<e-dialoghandler class="e-btn" dialog="#dialog-focus">
Open Dialog with auto focus
</e-dialoghandler>
<e-dialog id="dialog-focus" headline="Dialog Title">
<p>
Lorem, nostrud, dolor et ut minim? Ullamco eu cupidatat nostrud culpa, aliquip ut sint eiusmod aliquip aliquip proident consequat, ad. Sunt in mollit dolor fugiat anim nisi duis. Ex ea est, quis consectetur veniam.
</p>
<p>
Laborum eu nisi, aliqua sed ut aute velit. Anim quis officia do duis duis sint consequat veniam. Anim exercitation dolor excepteur dolore sit culpa aliquip, fugiat?
</p>
<div class="e-dialog__footer">
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-small">
<button class="e-btn" data-action="close">
Close
</button>
</div>
<div class="e-cell e-cell-small">
<button class="e-btn e-btn-primary" data-action="close" data-autofocus>
Accept
</button>
</div>
</div>
</div>
</e-dialog><e-dialoghandler class="e-btn" dialog="#dialog-focus">
Open Dialog with auto focus
</e-dialoghandler>
<e-dialog id="dialog-focus" headline="Dialog Title">
<p>
Aute elit enim sint amet eiusmod, in mollit, fugiat sit. Aliquip, est sit mollit laborum ut deserunt deserunt occaecat.
</p>
<p>
Amet sed adipiscing eu dolor proident. Magna in irure, nisi ad ipsum aute et. Ea reprehenderit aliquip officia, et, ex. Veniam cupidatat, sunt ea eiusmod, occaecat, labore minim, dolore aliqua, id minim fugiat, cillum, qui.
</p>
<div class="e-dialog__footer">
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-small">
<button class="e-btn" data-action="close">
Close
</button>
</div>
<div class="e-cell e-cell-small">
<button class="e-btn e-btn-primary" data-action="close" data-autofocus>
Accept
</button>
</div>
</div>
</div>
</e-dialog>JavaScript
Sunt officia, enim duis dolore, in dolor, velit? Dolor veniam voluptate, reprehenderit, voluptate, enim sint ut sed labore qui.
Incididunt nostrud magna consequat veniam nulla, deserunt minim dolore nostrud. Laborum sed, non veniam non deserunt pariatur sint? Non aliquip, ut adipiscing esse, officia elit. Nisi magna, enim do proident mollit dolor aliqua.
Disabled handler
<e-dialoghandler class="e-btn e-btn-primary e-btn-disabled" dialog="#dialog-disabled" disabled>
Disabled Open Dialog Handler
</e-dialoghandler>
<e-dialog id="dialog-disabled">
<p>
Reprehenderit in, nulla veniam, eu, tempor, dolor esse? Magna cillum veniam, voluptate sit magna. Adipiscing, eiusmod, anim duis quis ut anim in eu laboris, sit. Et fugiat lorem cillum ex nostrud nisi sunt tempor, esse, reprehenderit. Nisi nostrud laboris, in aliquip, et, veniam do excepteur, irure.
</p>
<p>
Ut, non nisi pariatur non, nostrud deserunt exercitation aute adipiscing irure voluptate. Qui adipiscing ea quis, sit officia est fugiat incididunt elit nulla ex nulla dolor? In, ut ea ut dolor est, in voluptate culpa minim? Irure, deserunt, sunt culpa nisi pariatur sit in.
</p>
</e-dialog><e-dialoghandler class="e-btn e-btn-primary e-btn-disabled" dialog="#dialog-disabled" disabled>
Disabled Open Dialog Handler
</e-dialoghandler>
<e-dialog id="dialog-disabled">
<p>
Aliqua lorem occaecat laborum nisi aute id, elit exercitation nisi, anim qui ex. Qui sit reprehenderit consequat, mollit occaecat sunt, labore eiusmod. Anim excepteur excepteur consequat dolor exercitation consectetur quis officia elit aliqua.
</p>
<p>
Quis, in reprehenderit occaecat labore velit culpa deserunt sunt. Ex in dolore et ut aliquip duis, ex ad voluptate ea, esse ex. Non fugiat cillum officia anim lorem amet non ullamco. In, veniam, voluptate, velit, nostrud veniam exercitation.
</p>
</e-dialog>JavaScript
Ut ut quis culpa id nisi excepteur.
Anim veniam duis incididunt dolore sed cupidatat ad. Reprehenderit do et ullamco incididunt officia est, dolore ex, dolore labore quis ut. Velit do, id, qui, proident nulla deserunt do. Laborum consectetur non, ipsum nulla sint culpa ea, excepteur, ut in enim. Duis lorem irure reprehenderit, sit officia nostrud, consectetur duis cupidatat? Cupidatat in id voluptate fugiat commodo veniam, officia culpa consequat sed aliqua, in dolor?
Custom Header and Footer
With custom header
<e-dialoghandler class="e-btn" dialog="#dialog-header">
Open Dialog with custom header
</e-dialoghandler>
<e-dialog id="dialog-header" headline="Custom Header Title">
<e-dialog-header>
<div class="e-tabs e-tabs-dialogheader">
<div class="e-tabs__title e-tabs__title-active">
<div class="e-tabs__separator">
First tab
</div>
</div>
<div class="e-tabs__title">
<div class="e-tabs__separator">
Second tab
</div>
</div>
</div>
</e-dialog-header>
<p>
Adipiscing id fugiat anim quis, commodo tempor, amet aliquip tempor do aliqua consequat. Incididunt sint labore quis dolor, occaecat dolore cupidatat, sint. Fugiat, dolor et, eu pariatur sit esse ad in duis?
</p>
<p>
Qui dolor qui, consectetur eiusmod voluptate sed enim. Cupidatat qui laborum quis veniam anim, labore ea ut lorem ex quis. Pariatur dolore mollit sed, elit voluptate.
</p>
</e-dialog><e-dialoghandler class="e-btn" dialog="#dialog-header">
Open Dialog with custom header
</e-dialoghandler>
<e-dialog id="dialog-header" headline="Custom Header Title">
<e-dialog-header>
<div class="e-tabs e-tabs-dialogheader">
<div class="e-tabs__title e-tabs__title-active">
<div class="e-tabs__separator">
First tab
</div>
</div>
<div class="e-tabs__title">
<div class="e-tabs__separator">
Second tab
</div>
</div>
</div>
</e-dialog-header>
<p>
Cupidatat sit minim in veniam, in ut? Ex irure, ipsum mollit tempor excepteur magna dolor. Aliqua, excepteur pariatur dolore, pariatur culpa, esse do, ad, et occaecat est consequat. Aliquip duis dolore occaecat lorem laboris?
</p>
<p>
Adipiscing velit veniam, aliqua occaecat duis et, pariatur. Aliquip laboris commodo commodo ipsum enim laborum anim. Ullamco aliquip, mollit irure reprehenderit sint, amet cupidatat, exercitation.
</p>
</e-dialog>JavaScript
First tab
Second tab
Do dolore consequat sit magna veniam labore, adipiscing ut. Veniam irure dolor sint tempor, irure labore. In nisi culpa ullamco culpa laborum, dolore ex. Officia excepteur ullamco velit id veniam elit consequat reprehenderit laboris ad. In sed quis aliquip est ipsum, incididunt adipiscing, proident dolor commodo? Lorem duis nostrud, ad ut. Adipiscing sit aliqua magna, deserunt.
Nostrud, exercitation et et ullamco. Dolor, quis sed sint quis veniam, elit velit eiusmod dolore. Id officia dolore in id elit, duis cupidatat labore dolore laboris qui. Occaecat ut, mollit veniam veniam amet enim, ut ipsum? Pariatur ut ea aliqua aliqua sed adipiscing labore. Cupidatat non deserunt lorem sit proident do dolore?
With footer element
<e-dialoghandler class="e-btn" dialog="#dialog-footer">
Open Dialog with footer element
</e-dialoghandler>
<e-dialog id="dialog-footer" headline="Dialog Title">
<p>
Nostrud consectetur, sed elit ad voluptate consectetur, minim. Ut ad dolor mollit quis exercitation, reprehenderit, dolor, occaecat anim occaecat amet nisi deserunt? Tempor ea quis mollit ullamco sint veniam, dolore, ipsum nostrud. Anim cupidatat excepteur ut minim consectetur, amet ut irure, excepteur? Eu, est cupidatat quis. Voluptate, in deserunt ut, ullamco, mollit aliquip, dolor, et, ad irure nostrud sint et.
</p>
<p>
In ut in quis eu? Deserunt aliquip dolore ullamco adipiscing ea, deserunt do et, ut. Fugiat sed aliqua ea et esse mollit occaecat, dolore. Cillum lorem, nisi irure esse laborum consequat, tempor duis.
</p>
<div class="e-dialog__footer">
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-small">
<button class="e-btn close_btn">
Close with Script
</button>
</div>
<div class="e-cell e-cell-small">
<button class="e-btn" data-action="close">
Close with Attr
</button>
</div>
</div>
</div>
</e-dialog><e-dialoghandler class="e-btn" dialog="#dialog-footer">
Open Dialog with footer element
</e-dialoghandler>
<e-dialog id="dialog-footer" headline="Dialog Title">
<p>
Fugiat mollit commodo, sint eiusmod id, excepteur sint qui occaecat eiusmod. Do, proident aute consequat incididunt, reprehenderit proident, non dolor enim, consequat. Qui ut esse sunt sunt minim non, do veniam non et irure cillum ut. Esse sunt esse ipsum est, in laboris cillum consectetur laborum. Occaecat anim, aliqua, ut esse consectetur dolore tempor.
</p>
<p>
Ea nulla aute non deserunt esse, lorem deserunt, labore, commodo dolore. Officia lorem id sunt minim esse officia ad culpa ut tempor ut. Elit, exercitation minim voluptate esse amet laborum aliqua, aliquip elit. Ea non ex ut minim ut culpa nostrud. Id pariatur, cupidatat irure, proident consequat dolor, enim aliqua in officia.
</p>
<div class="e-dialog__footer">
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-small">
<button class="e-btn close_btn">
Close with Script
</button>
</div>
<div class="e-cell e-cell-small">
<button class="e-btn" data-action="close">
Close with Attr
</button>
</div>
</div>
</div>
</e-dialog>JavaScript
document.querySelector('.close_btn').addEventListener('click', function() {
document.querySelector('#dialog-footer').close();
});
Esse, voluptate labore culpa in eiusmod, in excepteur, ut esse in. Elit sunt sint reprehenderit, veniam irure sit et. Ea ullamco incididunt, veniam ex aute ullamco minim. Adipiscing laborum, quis ut voluptate laborum esse amet ipsum dolor ullamco, ut. Proident aliqua dolor elit incididunt, consequat et nostrud irure?
Amet voluptate amet qui adipiscing excepteur non reprehenderit adipiscing eu, in do amet? In, officia, dolore consequat velit deserunt dolor adipiscing, tempor, quis exercitation. Reprehenderit nisi proident excepteur laborum sit reprehenderit anim ut eu fugiat. Eu ut esse consequat ut dolore mollit. Pariatur et ut magna, enim in ut ut ut quis, reprehenderit nulla exercitation.
Custom content
With image
<e-dialoghandler class="e-btn" dialog="#dialog-image">
Open Dialog with image
</e-dialoghandler>
<e-dialog class="e-dialog-img" id="dialog-image" headline="Dialog Title">
<img src="http://www.placecage.com/c/300/300" alt="Cage Rage">
</e-dialog><e-dialoghandler class="e-btn" dialog="#dialog-image">
Open Dialog with image
</e-dialoghandler>
<e-dialog class="e-dialog-img" id="dialog-image" headline="Dialog Title">
<img src="http://www.placecage.com/c/300/300" alt="Cage Rage">
</e-dialog>JavaScript
With iframe
<e-dialoghandler class="e-btn" dialog="#dialog-iframe">
Open Dialog with iframe
</e-dialoghandler>
<e-dialog class="e-dialog-iframe" id="dialog-iframe" height="500px">
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog><e-dialoghandler class="e-btn" dialog="#dialog-iframe">
Open Dialog with iframe
</e-dialoghandler>
<e-dialog class="e-dialog-iframe" id="dialog-iframe" height="500px">
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog>JavaScript
With cached iframe
<a class="e-btn" dialog="#dialog-iframe-cache">
Open Dialog
</a>
<e-dialog class="e-dialog-iframe" id="dialog-iframe-cache" height="500px" cache>
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog><a class="e-btn" dialog="#dialog-iframe-cache">
Open Dialog
</a>
<e-dialog class="e-dialog-iframe" id="dialog-iframe-cache" height="500px" cache>
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog>JavaScript
document.querySelector('[dialog="#dialog-iframe-cache"]').addEventListener('click', function() {
document.querySelector('#dialog-iframe-cache').open();
});
With action
<e-dialoghandler class="e-btn" dialog="#dialog-with-action">
Open Dialog
</e-dialoghandler>
<e-dialog headline="Import Contacts" id="dialog-with-action">
<e-dialog-action>
<e-dialog-action-title>
Create Auto-Import
</e-dialog-action-title>
<e-dialog-action-content>
Set up an automation that fetches a file with a list of contacts from an SFTP or WebDAV folder, to add it to your Emarsys contact database.
</e-dialog-action-content>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-media>
<e-icon icon="user" size="middle"></e-icon>
</e-dialog-action-media>
<e-dialog-action-container>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
</e-dialog-action-container>
</e-dialog-action>
<e-dialog-action disabled disabled-tooltip="Disabled tooltip">
<e-dialog-action-media>
<e-icon icon="user" size="middle"></e-icon>
</e-dialog-action-media>
<e-dialog-action-container>
<e-dialog-action-title>
Import File Manually
<e-tooltip content="Test" type="helper"></e-tooltip>
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action-container>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action>
</e-dialog><e-dialoghandler class="e-btn" dialog="#dialog-with-action">
Open Dialog
</e-dialoghandler>
<e-dialog headline="Import Contacts" id="dialog-with-action">
<e-dialog-action>
<e-dialog-action-title>
Create Auto-Import
</e-dialog-action-title>
<e-dialog-action-content>
Set up an automation that fetches a file with a list of contacts from an SFTP or WebDAV folder, to add it to your Emarsys contact database.
</e-dialog-action-content>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-media>
<e-icon icon="user" size="middle"></e-icon>
</e-dialog-action-media>
<e-dialog-action-container>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
</e-dialog-action-container>
</e-dialog-action>
<e-dialog-action disabled disabled-tooltip="Disabled tooltip">
<e-dialog-action-media>
<e-icon icon="user" size="middle"></e-icon>
</e-dialog-action-media>
<e-dialog-action-container>
<e-dialog-action-title>
Import File Manually
<e-tooltip content="Test" type="helper"></e-tooltip>
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action-container>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action>
</e-dialog>JavaScript
Styling
Local (relative to its parent)
<div style="position:relative; height: 300px">
<e-dialoghandler class="e-btn" dialog="#dialog-local">
Open Local Dialog
</e-dialoghandler>
<e-dialog id="dialog-local" headline="Dialog Title" local>
<p>
Nisi ex fugiat voluptate officia, labore, in, nisi? Exercitation occaecat do, nulla consequat do et? Ut exercitation lorem amet culpa do sed sed tempor ea magna. Minim veniam occaecat dolor, aute laborum sunt tempor exercitation est reprehenderit dolore? Ut, lorem in et, lorem veniam, ad, cillum ea occaecat. Pariatur adipiscing in magna, tempor adipiscing. Aliqua tempor lorem, aute id et nostrud dolor. Occaecat, enim incididunt voluptate et lorem culpa excepteur.
</p>
<p>
Proident, sunt, anim veniam sint pariatur et. Ad duis quis eu consectetur deserunt elit occaecat, ipsum enim in dolore. Aute, id laboris dolor voluptate ad. Esse exercitation, cillum nostrud aute, do velit. Ipsum laborum occaecat, tempor cupidatat labore veniam nisi dolor dolore voluptate. Non ullamco est dolore, enim qui in enim fugiat laboris, magna dolor.
</p>
</e-dialog>
</div><div style="position:relative; height: 300px">
<e-dialoghandler class="e-btn" dialog="#dialog-local">
Open Local Dialog
</e-dialoghandler>
<e-dialog id="dialog-local" headline="Dialog Title" local>
<p>
Eiusmod tempor exercitation id cillum cupidatat voluptate dolor aliqua. Ea, ut lorem tempor dolore sit, in pariatur et velit proident? Dolore dolore in quis, dolore culpa, exercitation. Ea lorem reprehenderit voluptate, velit id lorem dolore? Ea nulla velit consectetur irure, et et elit in mollit ex occaecat exercitation ullamco ad.
</p>
<p>
Consequat quis ea pariatur, dolor do, velit deserunt, sint ut in, lorem lorem voluptate. Veniam, commodo et non nisi ad, ut consectetur magna? Enim ut esse officia fugiat, irure dolore lorem in ea est. Minim consequat nulla, cupidatat ea.
</p>
</e-dialog>
</div>JavaScript
Dolore, commodo dolore commodo excepteur esse elit? Dolore, ipsum nulla nisi nulla in anim amet qui sunt, magna. Fugiat, enim labore, aliqua, id enim anim. Mollit amet dolore eu lorem id veniam. Ex ea, aute quis in sit ea, laborum veniam aliquip.
Fugiat sunt aliqua, ut consequat lorem et cupidatat reprehenderit nisi, ex, enim. Dolore labore id, ut qui et nulla sunt enim incididunt. Ipsum velit sunt reprehenderit, consequat esse laboris reprehenderit laboris reprehenderit duis in nostrud in occaecat. In est, nulla nostrud, enim, esse officia esse eu reprehenderit, pariatur mollit veniam consequat. Tempor ut excepteur deserunt occaecat eiusmod, aute commodo.
Resized
<e-dialoghandler class="e-btn" dialog="#dialog-resize">
Open Dialog with custom width and height
</e-dialoghandler>
<e-dialog id="dialog-resize" width="20%" height="200px">
<p>
Mollit in pariatur, anim, aliqua incididunt dolor magna officia? Cillum in, laborum, aliquip, voluptate sint ullamco occaecat? Dolor exercitation ut fugiat proident enim labore sunt consectetur lorem, dolor, in incididunt mollit labore. Adipiscing aliqua sit minim in aliqua est laboris. Sunt irure veniam laboris duis ea veniam est ut elit consequat incididunt in. Mollit ipsum ipsum sed aliquip, occaecat aute culpa mollit, commodo labore incididunt, amet deserunt.
</p>
<p>
Tempor elit, duis commodo occaecat eu ullamco tempor. Aliqua deserunt anim dolore, dolore aute esse deserunt. Proident quis qui officia cillum eu? Adipiscing consequat ad duis reprehenderit, nulla qui esse. Proident, laborum dolore non non proident nulla dolore qui. Velit, magna quis consequat veniam laboris culpa dolore aute. Ea sit, ad minim, dolor enim qui adipiscing non dolor.
</p>
</e-dialog><e-dialoghandler class="e-btn" dialog="#dialog-resize">
Open Dialog with custom width and height
</e-dialoghandler>
<e-dialog id="dialog-resize" width="20%" height="200px">
<p>
Eiusmod, adipiscing velit sed, est ex quis. Enim aute anim magna, est officia officia, culpa, reprehenderit, amet reprehenderit? Ut id velit sint in cupidatat labore ex pariatur pariatur magna, anim in? In esse veniam et consectetur reprehenderit cupidatat consectetur. Laborum laborum ea enim nulla veniam sunt deserunt.
</p>
<p>
Eiusmod, proident cupidatat dolor aute, dolore laborum ea ullamco sit ut ut, tempor, nostrud? Laborum, aute ut nostrud sint dolor sit cillum. Enim cillum nisi magna, ipsum, dolore, ad ipsum, nostrud, tempor. Velit, excepteur mollit veniam mollit sit quis, ut in laboris est. Ea non duis pariatur do sit commodo dolor occaecat?
</p>
</e-dialog>JavaScript
Irure irure, voluptate enim aute esse aute in, in. Laboris ipsum adipiscing laborum, sed irure consectetur in? Labore consectetur mollit lorem, tempor, consectetur lorem eu veniam ut dolore in. Ipsum tempor ipsum, enim in consectetur ut anim sed. Eu tempor elit laboris culpa consectetur, tempor dolor occaecat fugiat eiusmod, sit. Commodo ipsum lorem aliquip sunt sint.
Sit proident et esse, nulla aliquip. Incididunt eu pariatur dolor culpa nisi nostrud, nostrud, aliqua nostrud mollit. Incididunt do. Ad consectetur, aliqua magna eu est dolore. Proident, sed, duis, et cupidatat ex labore aute. Nisi, eu fugiat fugiat, sed id qui sed eiusmod adipiscing qui. Culpa cupidatat dolore, officia in consectetur, elit sint sit est lorem id quis aliqua esse. Fugiat cupidatat, elit proident cupidatat tempor, nostrud, commodo fugiat nulla. Do qui minim, tempor quis, excepteur laboris dolore irure ut, quis reprehenderit in?
Custom Dialogs
Create dialog "on the fly" with events
<button class="e-btn on_the_fly">
Create Dialog On The Fly
</button><button class="e-btn on_the_fly">
Create Dialog On The Fly
</button>JavaScript
var dialog = document.createElement('e-dialog')
dialog.addEventListener('dialog.open', function(event) { console.log(event.detail.component); });
dialog.addEventListener('dialog.close', function(event) { console.log(event.detail.component); });
document.querySelector('.on_the_fly').addEventListener('click', function() {
dialog.open({
width: '600px',
height: '200px',
headline: 'Success',
content: 'Consectetur amet dolor, dolor magna consectetur incididunt eu duis. Quis in nostrud sint, reprehenderit eu? Incididunt do tempor sint aute occaecat.',
noKeys: true,
buttons: {
'Close': {
callback: function() {
this.close();
},
className: 'e-flex__item'
},
'Close Action': {
action: 'close',
className: 'e-flex__item'
},
'Save': {
autofocus: true,
callback: function() {
alert('Action');
},
className: 'e-btn-primary e-flex__item'
}
}
});
});
Floating page
<div class="e-buttongroup">
<a class="e-btn" href="#0" id="flaotingPage">
Open Floating Page
</a>
<a class="e-btn" href="#0" id="flaotingPageFullHeight">
Open Fullheight Layout
</a>
</div><div class="e-buttongroup">
<a class="e-btn" href="#0" id="flaotingPage">
Open Floating Page
</a>
<a class="e-btn" href="#0" id="flaotingPageFullHeight">
Open Fullheight Layout
</a>
</div>JavaScript
document.getElementById('flaotingPage').addEventListener('click', function() {
window.e.utils.openFloatingPage({ url: 'https://redirector-staging.eservice.emarsys.com/ui/latest/doc/dialoginiframe.html' });
});
document.getElementById('flaotingPageFullHeight').addEventListener('click', function() {
window.e.utils.openFloatingPage({ url: 'https://redirector-staging.eservice.emarsys.com/ui/latest/doc/dialoginiframefullheight.html' });
});
Consequential confirmation dialog
<div class="e-buttongroup">
<a class="e-btn" href="#0" id="consequentialDialog">
Open Consequential Dialog
</a>
</div><div class="e-buttongroup">
<a class="e-btn" href="#0" id="consequentialDialog">
Open Consequential Dialog
</a>
</div>JavaScript
document.getElementById('consequentialDialog').addEventListener('click', function() {
window.e.utils.openConsequentialConfirmationDialog({
headline: 'Launch campaign now?',
content: 'The email will be sent to an estimated 8 123 382 contacts.',
confirm: {
label: 'Launch',
callback() {
console.log('Confirm clicked');
}
},
cancel: {
label: 'Cancel',
callback() {
console.log('Cancel clicked');
}
}
});
});
Destructive confirmation dialog
<div class="e-buttongroup">
<a class="e-btn" href="#0" id="destructiveDialog">
Open Destructive Dialog
</a>
</div><div class="e-buttongroup">
<a class="e-btn" href="#0" id="destructiveDialog">
Open Destructive Dialog
</a>
</div>JavaScript
document.getElementById('destructiveDialog').addEventListener('click', function() {
window.e.utils.openDestructiveConfirmationDialog({
headline: 'Delete this?',
content: 'Once deleted, it cannot be accessed anymore.',
confirm: {
label: 'Delete',
callback() {
console.log('Delete clicked');
}
},
cancel: {
label: 'Cancel',
callback() {
console.log('Cancel clicked');
}
}
});
});
Custom Dialog
<div class="e-buttongroup">
<a class="e-btn" href="#0" id="newDialog">
Open Custom Dialog
</a>
</div><div class="e-buttongroup">
<a class="e-btn" href="#0" id="newDialog">
Open Custom Dialog
</a>
</div>JavaScript
var dialogNode = document.createElement('div');
dialogNode.innerHTML = '
<div class="e-dialog__header">Header
</div>
<div class="e-dialog__content">Content
</div>
<div class="e-dialog__footer">
<button class="e-btn">Cancel
</button>
</div>'
document.getElementById('newDialog').addEventListener('click', function() {
var dialog = window.e.utils.dialog({ content: dialogNode });
dialog.open();
});
API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| headline | This is the title of the dialog window | string | - | |
| no-keys | Disables the ESC key to prevent closing with it | boolean | false | |
| no-close | Disables every interaction related to close | boolean | false | |
| local | If set to true, dialog will opens locally in it's parent container. See example above | boolean | false | |
| width | Width of the dialog in any CSS metric. This attribute doesn't change the size of an already opened dialog, so if you are also using the opened="true" attribute, make sure to set the width before it. | string | - | |
| height | Height of the dialog in any CSS metric | string | - | |
| preventClose | When true, dialog cannot be closed | boolean | false | |
| opened | Handles opened state | boolean | false |
Method
| Name | Description |
|---|---|
open([object]) | Opens the dialog, and when the right object has passed, it can also build a popup. See the 'Create on the fly with events' example above. |
setContent([html]/[domNode]) | Changes the content of dialog with the given parameter in opened state. It restores original content on close. |
setHeader([html]/[domNode]) | Appends a secondary header to the dialog with the given parameter in opened state. It restores original headers on close. |
setSize([object]) | Sets the dimensions of the dialog to the given { width, height } values. They must be valid CSS values e.g. '600px'. Be aware that the height means the height of the header + content + footer, not just the content. |
Events
| Event | Description | Returns |
|---|---|---|
dialog.open | Fires on open | {
detail: {
component: [as object]
}
} |
dialog.close | Fires on close | {
detail: {
component: [as object]
}
} |
dialog.beforeClose | Fires on before close | {
detail: {
component: [as object]
}
} |
Floatingpage API Reference
Method
| Name | Description |
|---|---|
window.e.utils.openFloatingPage({url: url}) | Opens the floatingpage with iframe. The iframe url come from parameter. |
window.e.utils.closeFloatingPage() | Close all floatingpage on the page. You can call in or outside from iframe. |
Confirmation Dialog API Reference
Method
| Name | Description |
|---|---|
window.e.utils.openConsequentialConfirmationDialog({ headline, content, confirm, cancel }) | Opens consequential confirm dialog. |
window.e.utils.openDestructiveConfirmationDialog({ headline, content, confirm, cancel }) | Opens destructive confirm dialog. |
Parameters
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| headline | This is the title of the confirmation dialog. | string | true | - |
| content | This is the content of the confirmation dialog. It will be sanitized by default. | html | true | - |
| disableSanitization | Turn off automatic HTML sanitization on content of the confirmation dialog. Make sure the given content is sanitized! | boolean | false | |
| confirm.label | This is the label of the confirmation button. | string | Ok | |
| confirm.callback | This is the code to execute when the confirmation button is clicked. The dialog is closed automatically, no need to programatically close it. | function | ||
| cancel.label | This is the label of the cancel button. | string | Cancel | |
| cancel.callback | This is the code to execute when the cancel button is clicked. The dialog is closed automatically, no need to programatically close it. | function |
Custom Dialog API Reference
Method
| Name | Description |
|---|---|
window.e.utils.dialog({ content }) | Opens a custom dialog with given content. Content can be a string (or HTML) or a DOM Node. It returns the reference of the dialog. |
open | Opens the custom dialog. Should be called on the reference of window.e.utils.dialog. |
close | Closes the custom dialog. Should be called on the reference of window.e.utils.dialog. |
Parameters
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| content | This is the content of the custom dialog. | domNode or html |
e-dialog-action API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| key | An identifier for tracking events. It should be unique. | string | ||
| disabled | Disabled state. Does not fire trigger event if true. | boolean | false | |
| disabled-tooltip | Defines tooltip for disabled actions. | string |
Events
| Event | Description | Returns |
|---|---|---|
trigger | Fires on clicking the action. | |
Dialog
Guidelines
When you add a new dialog to the UI, it should pass each of the following guidelines. You must have a strong reason to break any of these.
- Dialogs should be focused, we want the user to do one task, action or decision without interruption.
- Dialogs should be positioned in the vertical and horizontal center of the screen.
- Use an overlay below the dialog (and on top of the app). This helps the users focus on their task.
- Have meaningful title fixed at top, that tells the user what this dialog is about.
- Have closing “x” in top right corner that cancels the dialog. This provides a safe escape route if the user arrived here by mistake.
- Make sure that outside click and ESC should also close the modal, the same way as the "x" does.
- Choose the right size for your dialog, so the content is not scrolling for most users.
- Have a separator between the content and the buttons.
- Have at least a “Close” (or “Cancel”) secondary button besides any additional actions buttons (with max 1 primary button).
- For dialogs with destructive actions, use e-btn-danger as primary button.
- Align the action buttons to the left.
Confirmation Dialogs
Confirmation dialogs are dialog patterns which act as “final steps” before committing to an action that has a specific, potentially destructive consequence.
Delete Confirmation Dialog
The delete confirmation should be triggered when the user initiates an action that will be deleting or discarding a resource.
This dialog both communicates the permanent destructivity of the action, and acts as a safety measure against accidental user inputs.
- The headline of this dialog must be framed as a short, easy-to-comprehend question, and the user must answers this question by clicking an action button. The headline can refer to the resource as a generic type.
- The close button of this dialog must act as a “back to safety” (or “cancel”) button.
- The dialog contains a description that elaborates on the effect of the action, and refers to the resource to be deleted by name (if possible).
- Contextual content and controls in this dialog can be included, e.g. an “assign roles to another user” control when deleting a user. This depends heavily on when and where the dialog is used.
- Cancel button: this “back to safety” action button must be the first in line, and must have the focus by default.
- Delete button: must explicitly answer the confirmation question asked in the dialog’s headline with a keyword. The label must convey destructivity and danger even if the user doesn’t read the confirmation question.
Example for an overly simple, generic delete confirmation that could be used in most places:
“Delete this? Once deleted, it cannot be accessed anymore. Cancel, Delete”
Example for a more specific, custom confirmation that can be used in a specific context:
“Delete this campaign? Once deleted, the campaign “newsletter 171206” cannot be accessed anymore. You will not be able to send it to recipients. You will not be able to use it in automation workflows. Cancel, Delete”
Leave Confirmation Dialog
The leave confirmation dialog should generally be triggered when the user wants to leave a page in which they’ve inputted data, and upon leaving this data will be discarded.
This dialog both communicates the permanent destructivity of the action, and acts as a safety measure against accidental user inputs.
- The headline of this dialog must be framed as a short, easy-to-comprehend question, and the user must answers this question by clicking an action button. The headline can refer to the resource as a generic type.
- The close button of this dialog must act as a “back to safety” (or “cancel”) button.
- The dialog contains a description that elaborates on the effect of the action, and refers to the resource to be deleted by name (if possible).
- Cancel button: this “back to safety” action button must be the first in line, and must have the focus by default.
- Delete button: must explicitly answer the confirmation question asked in the dialog’s headline with a keyword. The label must convey destructivity and danger even if the user doesn’t read the confirmation question.
Example for an overly simple, generic leave confirmation that could be used in most places:
“Discard changes? By leaving this page, all your unsaved changes will be lost. Stay, Discard and Leave”
Example for a more specific, custom confirmation that can be used in a specific context:
“Discard changes? By leaving this page, all your unsaved changes in the campaign “newsletter 171206” will be lost. Stay, Discard and Leave”
Consequential confirmation dialog
The consequential confirmation dialog should generally be triggered in any of the following cases:
- Creating a large number of resources at one click
- Creating or launching something that is complicated to stop or undo
- Launching a process that might take a relatively long time
- Triggering an action that affects a large number of contacts, resources, etc. at once
This dialog communicates the extent of what will happen, emphasizes the responsibility of the user, sets the user's expectation about the length of the process, and acts as a safety measure against accidental user actions.
- The headline of this dialog must be framed as a short, easy-to-comprehend question, and the user must answer this question by clicking an action button. The headline can refer to the resource as a generic type.
- The close button of this dialog must act as a “back to safety” (or “cancel”) button.
- The dialog contains a description that elaborates on the effect of the action and refers to the resource(s) to be created or affected by name (if possible). The description should not be overwhelming in length and detail so that it does not scare the user from proceeding with their original intent.
- Cancel button: this “back to safety” action button must be the first in line and must have the focus by default.
- Proceed button: must explicitly answer the confirmation question asked in the dialog’s headline with a keyword. Instead of a generally phrased action button, the label must convey the nature of the action even if the user does not read the confirmation question. (E.g. “Launch ” instead of “OK”.) The label might also contain the type of the affected resource.
Example for a confirmation when launching a creation process that affects a lot of resources at one click:
“Create Birthday Program? The program you are about the create will generate Automation programs, Campaigns and Segments. This might take a few minutes. Cancel, Create program”