Messages

SVAR provides an extended messaging system for interaction between a user and an application. There are two main types of messages: Notices and Modal boxes. Depending on the type of a message, you can either display some short notifications or show modal boxes that require some user's activity.

Notice boxes

A notice message box appears on a button click in the top right corner of the window. It can be colored according to the type of a notice and contain a text message.

Exploring types of notices

All in all, there are 5 types of notice messages available:

• default (white background)
• "info" (blue background)
• "warning" (orange background)
• "success" (green background)
• "danger" (red background)

Type	Image
default (type:"")
info (type:"info")
warning (type:"warning")
success (type:"success")
danger (type:"danger")

Creating a Notice

To create a notice, make use of the showNotice() helper function. To get access to the helper, you should include it on a page via the getContext() Svelte function as in:

<script>
    import { getContext } from "svelte";

    // getting the helper
    const { showNotice } = getContext("wx-helpers");
</script>

Then you can use the showNotice() function in your code. It takes the following parameters:

• text - (string) obligatory, the text to show in a notice. In case of a very long text, a word wrap is applied
• type - (string) optional, the type of a notice: an empty value for the default notice box, "info", "warning", "success", "danger" (see details). You can skip this property during initialization. Then a notice message will simply have a white background.
• expire - (number) optional, the expire interval for a message in milliseconds, 5000 by default, -1 for not hiding the message

<script>
    import { Button } from "wx-svelte-core";
    import { getContext } from "svelte";

    // getting the helper
    const { showNotice } = getContext("wx-helpers");
</script>

// showing a notice on a button click
<Button onclick={() => showNotice({   
    type: "info",  
    expire: 6000,  
    text: "Some info" })}>
    Show Info
</Button>

Related sample: Messages

Hiding a notice

By default, a notice disappears under the following conditions:

• on clicking the Close button
• in 5000 milliseconds after appearing

You can adjust the expire interval with the help of the expire parameter:

<script>
    import { Button } from "wx-svelte-core";
    import { getContext } from "svelte";

    // getting the helper
    const { showNotice } = getContext("wx-helpers");
</script>

<Button onclick={() => showNotice({   
    type: "success",  
    expire: 10000,  
    text: "Your data is correct" })}>
    OK
</Button>

You can also cancel the expire period by setting the expire:-1 property. In this case a notice will disappear only on a Close button click.

Related sample: Messages

Modal boxes

Modal boxes have a more complex structure than notices. They may have a title, contain some text and several buttons, depending to the box's type. Modal boxes add a grey overlay over the user interface, which disappears only when a user clicks a button in the box or the box is hidden by a call of a function.

Exploring types of modal boxes

There are 4 types of modal boxes:

• alert - an alert box with one button, used to draw a user's attention
• confirm - a confirmation box with two buttons to accept or to decline a further action
• prompt - a modal message box with two buttons (submit and cancel) and an input to get some info from a user before proceeding
• dialog - a modal message box with any number of buttons and a textarea to enter a user's text

Related sample: Messages

Creating Alert and Confirm boxes

To create an alert or a confirm box, you should use the showModal() helper function. To get access to the helper, you should include it on a page via the getContext() Svelte function as in:

<script>
    import { getContext } from "svelte";

    // getting the helper
    const { showModal } = getContext("wx-helpers");
</script>

Then you can use the showModal() function in your code. It takes the following parameters:

• title - the text of the header
• message - the text of the modal box body
• buttons - an array of buttons for a modal box
• onconfirm - a function which is called on click of the OK button
• oncancel - a function which is called on click of the Cancel button (for the confirm box)

The callback of the event can take an object with the following parameter:

• button (string) - (optional) the value is set to "cancel" if the event fires on the button click.

In case the onconfirm or oncancel event fires on pressing ENTER or ESC, the callback function takes no parameters. If the event fires on the button click, the callback of the onconfirm or oncancel event can take an object with the following parameter:

• button (string) - (optional) the value is set to "cancel" (for oncancel) or "ok" (for onconfirm)

The showModal() method returns a promise:

• for the Confirm box the promise resolves if a user clicks OK. The promise rejects if a user clicks Cancel

Confirm.svelte

<script>
    import { Button } from "wx-svelte-core";
    import { getContext } from "svelte";

    // getting the helper
    const { showModal } = getContext("wx-helpers");
</script>

function confirm() {
    showModal({
        title: "Confirm",
        message: "Will we do it ?"
    });
}

<Button onclick={confirm}>Show Confirm</Button>

• for an Alert box the promise resolves when a user clicks the button

Alert.svelte

<script>
    import { Button } from "wx-svelte-core";
    import { getContext } from "svelte";

    // getting the helper
    const { showModal } = getContext("wx-helpers");
</script>

function alert() {
    showModal({
        message: "Something happens",
        buttons: ["ok"],
    });
}

<Button onclick={alert}>Show Alert</Button>

Related sample: Messages

Creating Prompt and Dialog boxes

To create a prompt or a dialog modal box, you should use the <Modal> component wrapped into the Portal component. The Modal component includes several logical parts: for the header, for the body and for the buttons. Portal allows taking a widget outside the strict structure of the Svelte application and put it wherever you need in the application.

Prompt

To initialize a Prompt modal box, you should wrap the <Modal> component into the Portal one and specify the following properties:

• title - the text of the header
• onconfirm - a function which is called on click of the OK button
• oncancel - a function which is called on click of the Cancel button

The body of the Prompt box should contain an input implemented with the help of the Text control.

<script>
    import { Modal, Text, Portal } from "wx-svelte-core";

    function onclick() {
        // your logic
    }
</script>

<div>
    <Portal>
        <Modal title="Subscribe" oncancel={click} onconfirm={click}>
            <Text select={true} focus={true} value="Enter your email" />
        </Modal>
    </Portal>
</div>

Related sample: Messages

Dialog

To initialize a Dialog modal box, you should:

• wrap the <Modal> component into the Portal one
• use the Textarea control to implement a textarea in the body part
• specify the footer snippet, where you can place your buttons presented by the Button control

<script>
    import { Modal, Textarea, Button, Portal } from "wx-svelte-core";

    function click() {
        // your logic
    }
</script>

<div>
    <Portal>
        <Modal>
            Your feedback
            <Textarea placeholder="Leave your comment" />
            
            <div>
                <Button {onclick}>Yes</Button>
                <Button {onclick}>No</Button>
                <Button {onclick}>Maybe</Button>
            </div>
        </Modal>
    </Portal>
</div>

Related sample: Messages

Hiding modal boxes

All modal boxes are closed on a button click.

To hide a prompt, you can specify a function and set its name as a value of either the onconfirm or oncancel event.

To hide a dialog you can specify a hiding function and set its name as a value of the click property of the corresponding Button control.

<script>
    import { Modal, Text, Textarea, Button } from "wx-svelte-core";

    let custom1, custom2;
    function hideAll() {
        custom1 = custom2 = false;
    }
</script>

<div class="demo-box">
    <Button type="primary" onclick={}>
        Show Prompt
    </Button>
    
    {#if custom1}
        <Modal title="Custom Prompt" onconfirm={hideAll} oncancel={hideAll}>
            <Text select={true} focus={true} value="Some" />
        </Modal>
    {/if}

    <Button onclick={() => (custom2 = !custom2)}>
        Show Dialog
    </Button>
    
    {#if custom2}           
        <Modal>
            Some text here
            <Textarea placeholder="Some text" />
            <div style="margin-top: 20px;">
                {#snippet buttons()}
                    <Button onclick={hideAll}>Yes</Button>
                    <Button onclick={hideAll}>No</Button>
                    <Button onclick={hideAll}>Maybe</Button>
                {/snippet}
            </div>
        </Modal>
    {/if}
</div>

Related sample: Messages

Keyboard navigation in modal boxes

Modal boxes block keyboard events of a page. Only the following keys are available:

• "Enter" for accepting an action and for moving to the next line in the textarea of a Dialog box
• "Escape" for rejecting an action

Localizing modal boxes

You can localize the text of the OK and Cancel buttons of a modal box. For this you need to:

• include the Locale component on a page with a modal box and import the necessary locale package on a page.

<script>
    import { Modal, Locale } from "wx-svelte-core";
    import { de } from "wx-core-locales";
</script>

• wrap the modal box you want to localize in the <Locale> tag and use the words property to set the necessary locale:

<Locale words={de}>
    <Modal title="Custom Prompt" ok={hideAll} cancel={hideAll}>
        <Text select={true} focus={true} value="Some" />
    </Modal>
</Locale>