CreateModal

Hello World

Content:
- Methods

A modal is a popup with more controls that can be added.

mdl = MUI.CreateModal( title, body, okTxt, cancelTxt, show, options ) → Object

You can display a modal with text directly by providing a body text. You can use the "Full" as options if you want your modal to occupy the whole screen.

Example - Basic click to expand contents

cfg.Light
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal
    app.InitializeUIKit(color.teal)

    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        btn = MUI.CreateButtonRaised("SHOW MODAL", 0.35)
        btn.SetOnTouch(ShowModal)
        lay.AddChild(btn)

    app.AddLayout(lay)

    var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua , sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    modal = UI.CreateModal("Modal title", text)
}

function ShowModal()
{
    modal.Show()
}

Copy All

If you want to add your custom controls on the modal such as images and buttons, you can
do so by passing an empty string or null to the body text param

Example - Custom Controls click to expand contents

cfg.Light
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal
    app.InitializeUIKit(color.teal)

    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        btn = MUI.CreateButtonRaised("SHOW MODAL", 0.4)
        btn.SetOnTouch(ShowModal)
        lay.AddChild(btn)

        modal = UI.CreateModal("Modal title", "", "PROCEED", "CANCEL", false)

        //Add custom controls to your modal
        modalLay = modal.GetLayout()

        img = app.CreateImage("/Sys/Img/Droid1.png", 0.5)
        modalLay.AddChild(img)

        button = MUI.CreateButtonRound("SOME BUTTON", 0.4)
        modalLay.AddChild(button)

    app.AddLayout(lay)
}

function ShowModal()
{
    modal.Show()
}

Copy All

Use SetOnTouch method to call a function when the user touches the control buttons.

Example - With Callback click to expand contents

cfg.Dark
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal
    app.InitializeUIKit(color.teal)

    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        btn = MUI.CreateButtonRaised("SHOW MODAL", 0.35)
        btn.SetOnTouch(ShowModal)
        lay.AddChild(btn)

    app.AddLayout(lay)

    var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua , sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    modal = UI.CreateModal("Modal title", text)
    modal.SetOnTouch(OnControlTouch)
}

function ShowModal()
{
    modal.Show()
}

function OnControlTouch(isOk, btnText)
{
    app.ShowPopup(isOk+" : "+btnText)
}

Copy All

Example - Full Modal click to expand contents

cfg.Light
cfg.MUI

function OnStart()
{
    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        btn = MUI.AddButtonRaised(lay, "SHOW MODAL", 0.35)
        btn.SetOnTouch(ShowModal)

    app.AddLayout(lay)

    var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua , sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    modal = UI.CreateModal("Modal title", text, "Save", "Close", false, "Full")
    modal.SetOnTouch(OnControlTouch)
}

function ShowModal()
{
    modal.Show()
}

function OnControlTouch(isOk, btnText)
{
    app.ShowPopup(isOk+" : "+btnText)
}

Copy All