Order
Description
The users can manually invoke a customisation mode, in which they can move widgets. Widget ordering can be controlled via buttons (accessible from widget toolbar) and via drag and drop.
Usage
The component is not part of the main ui framework, You should include additional files to use it in production:
<link rel="stylesheet" href="https://redirector.eservice.emarsys.net/ui/latest/css/services/ui-framework/order.css">
<script src="https://redirector.eservice.emarsys.net/ui-framework-order/latest/app.js"></script>and in staging:
<link rel="stylesheet" href="https://redirector-staging.eservice.emarsys.com/ui/latest/css/services/ui-framework/order.css">
<script src="https://redirector-staging.eservice.emarsys.com/ui-framework-order/latest/app.js"></script>Variations
Editing
<section class="e-layout__section e-layout__section-transparent">
<e-order columns="2" editing>
<e-order-item id="1asd" order="1" size="1">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
1. Campaign daily visits
</h4>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
<e-icon icon="cog"></e-icon>
Lorem ipsum
</button>
</div>
</footer>
</e-widget>
</e-order-item>
<e-order-item id="2asd" order="2" size="1">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
2. Campaign daily visits
</h4>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
<e-icon icon="cog"></e-icon>
Lorem ipsum
</button>
</div>
</footer>
</e-widget>
</e-order-item>
<e-order-item id="3asd" order="3" size="2">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
3. Campaign daily visits
</h4>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
<e-icon icon="cog"></e-icon>
Lorem ipsum
</button>
</div>
</footer>
</e-widget>
</e-order-item>
</e-order>
</section><section class="e-layout__section e-layout__section-transparent">
<e-order columns="2" editing>
<e-order-item id="1asd" order="1" size="1">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
1. Campaign daily visits
</h4>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
<e-icon icon="cog"></e-icon>
Lorem ipsum
</button>
</div>
</footer>
</e-widget>
</e-order-item>
<e-order-item id="2asd" order="2" size="1">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
2. Campaign daily visits
</h4>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
<e-icon icon="cog"></e-icon>
Lorem ipsum
</button>
</div>
</footer>
</e-widget>
</e-order-item>
<e-order-item id="3asd" order="3" size="2">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
3. Campaign daily visits
</h4>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
<e-icon icon="cog"></e-icon>
Lorem ipsum
</button>
</div>
</footer>
</e-widget>
</e-order-item>
</e-order>
</section>JavaScript
1. Campaign daily visits
2. Campaign daily visits
3. Campaign daily visits
Display
<section class="e-layout__section e-layout__section-transparent">
<e-order columns="2">
<e-order-item id="1asd" order="1" size="1">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
1. Campaign daily visits
</h4>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
<e-icon icon="cog"></e-icon>
Lorem ipsum
</button>
</div>
</footer>
</e-widget>
</e-order-item>
<e-order-item id="2asd" order="2" size="1">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
2. Campaign daily visits
</h4>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
<e-icon icon="cog"></e-icon>
Lorem ipsum
</button>
</div>
</footer>
</e-widget>
</e-order-item>
</e-order>
</section><section class="e-layout__section e-layout__section-transparent">
<e-order columns="2">
<e-order-item id="1asd" order="1" size="1">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
1. Campaign daily visits
</h4>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
<e-icon icon="cog"></e-icon>
Lorem ipsum
</button>
</div>
</footer>
</e-widget>
</e-order-item>
<e-order-item id="2asd" order="2" size="1">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
2. Campaign daily visits
</h4>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
<e-icon icon="cog"></e-icon>
Lorem ipsum
</button>
</div>
</footer>
</e-widget>
</e-order-item>
</e-order>
</section>JavaScript
1. Campaign daily visits
2. Campaign daily visits
API Reference e-order
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| editing | Enable item ordering functionality, delete attribute for not editing | boolean | false | |
| colums | defines a quasi grid | number | 2 |
API Reference e-order-item
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| id | String item id | string | true | |
| order | Defines the place of the item | number | true | |
| size | Defines item width, e.g. if the value is 2 the item occupies 2 columns | number | 1 |
Events
| Event | Description | Returns |
|---|---|---|
change | An array containing the elements with `id` and `order` properties | {
detail: [...items]
} |