Back

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

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 Run

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

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 Run

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

Example - With Callback

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 Run

Example - Full Modal

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 Run

Methods

The following methods are available on the Modal object:

ClearFocus()

Focus()

GetAbsHeight() → Number: integer

GetAbsWidth() → Number: integer

GetHeight( options ) → Number

GetLayout() → app object: Layout

GetLeft( options ) → Number

GetParent() → app object

GetPosition( options ) → Object: { left, top, right, bottom }

GetTop( options ) → Number

GetVisibility() → String: “Show” or “Hide” or “Gone”

GetWidth( options ) → Number

Gone()

Hide()

IsEnabled() → Boolean

IsOverlap( obj, depth ) → Boolean

IsVisible() → Boolean

SetEnabled( enable )

SetHeaderColor( color )

SetOnClose( callback )

SetOnTouch( callback )

SetText( text )

SetTextColor( color )

SetTitle( title )

SetVisibility( mode )

Show()

Boolean

app object

Number

String

Number: fraction (0..1)

String:
hexadecimal: “#rrggbb”, “#aarrggbb”
colourName: “red”, “green”, ...

String: “Body text. If you want to customize the modal layout pass an empty string.”

String: “Truthy button text”

String: “Falsy button text”

String: “Dialog options with additional Full option”

String: “px”

String: “screen”, “px”

String: “Show” or “Hide” or “Gone”

function()

function( isOkBtnClick, btnText )

mdl.ClearFocus
Removes the focus of the control so that the user no longer has immediate access to it.

mdl.Focus
Set the focus to the control so that the user can interact with it immediately.

mdl.GetAbsHeight
Get the absolute height of the control in pixels.

mdl.GetAbsWidth
Get the absolute width of the control in pixels.

mdl.GetHeight
Get the height of the control as screen height relative float or in pixels with the px option.

mdl.GetLayout
Get the layout of the modal where you can add your controls.

mdl.GetLeft
Get the distance from the control to the left parent border as width relative float or in pixels with the px option.

mdl.GetParent
Returns the parent control object where the object was added to - commonly a layout.

mdl.GetPosition
Returns data about the position and size of the control.
If the screen option is given the position on the screen will be returned. Otherwise relative to the parent control.
The px options turns the relative values into pixels.

mdl.GetTop
Get the distance from the control to the upper parent border as height relative float or in pixels with the px option.

mdl.GetVisibility
Returns the current visibility state of the control. The Values are:
Show: visible
Hide: invisible but still consuming space
Gone: invisible and not consuming space

mdl.GetWidth
Get the width of the control as screen width relative float or in pixels with the px option.

mdl.Gone
Hides the control without consuming any more layout space as if it were never there.

mdl.Hide
Hide the control but keep the layout space free.

mdl.IsEnabled
Returns whether the control is currently useable by the user.

mdl.IsOverlap
Returns whether the control overlaps with another by a given distance.

mdl.IsVisible
Returns whether the control is currently visible to the user, ignoring overlaying controls.

mdl.SetEnabled
En/Disable the control physically and visually so that the user can/can not access the control. Events like OnTouch will still be fired.

mdl.SetHeaderColor
Change the background color of the header

mdl.SetOnClose
Define a callback to be called when the dialog of control is closed.

mdl.SetOnTouch
Calls a function when control buttons are click

mdl.SetText
Change the currently displayed text in the control.

mdl.SetTextColor
Change the text color of the contained text.

mdl.SetTitle
Sets a new title to the modal

mdl.SetVisibility
Change the visibility of the control to one of the available modes:
Show: visible
Hide: invisible but still consuming space
Gone: invisible and not consuming space

mdl.Show
Set the visibility of the control to “Show”.