Back

showPopup

JS Py
Hello World
Content:
- Properties
- Methods

Shows a popup into your app.

pop = ui.showPopup( msg, options, duration, action ) → Object: Popup Component.

Properties

These are the setter and getter properties for the showPopup Component.

duration
text

Example - Basic

class Main extends App
{
    onStart()
    {
        // Create a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add button control to the main layout
        this.btn1 = ui.addButton(this.main, "Show Popup")

        // Add a callback handler when the button is touched
        this.btn1.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        // Display popup on the Top with transition Grow
        ui.showPopup("Hello from popup!")
    }
}
from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    btn1 = ui.addButton(main, "Show Popup")
    btn1.setOnTouch(onTouch)

def onTouch(event):
    ui.showPopup("Hello from popup!")
Copy All       Run      

Example - Popups with transitions

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.setChildMargins(0, 0, 0, 0.02)

        // Adds first button to the main layout
        this.btn1 = ui.addButton(this.main, "Top & Grow", "Primary")
        this.btn1.setOnTouch( this.onTouch1 )

        // Adds second button to the main layout
        this.btn2 = ui.addButton(this.main, "Bottom and Slide", "Secondary")
        this.btn2.setOnTouch( this.onTouch2 )
    }

    onTouch1()
    {
        // Display popup on the Top with transition Grow
        ui.showPopup("Hello world.", "Top,Grow")
    }

    onTouch2()
    {
        // Display popup on the Bottom with transition Slide in 1.5 seconds.
        ui.showPopup("Hello world.", "Bottom,Slide", 1500)
    }
}
from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    main.setChildMargins(0, 0, 0, 0.02)
    btn1 = ui.addButton(main, "Top & Grow", "Primary")
    btn1.setOnTouch(onTouch1)
    btn2 = ui.addButton(main, "Bottom and Slide", "Secondary")
    btn2.setOnTouch(onTouch2)

def onTouch1(event):
    ui.showPopup("Hello world.", "Top,Grow")

def onTouch2(event):
    ui.showPopup("Hello world.", "Bottom,Slide", 1500)
Copy All       Run      

Example - With Transition

class Main extends App
{
    onStart()
    {
        // Create a fullscreen layout with objects vertically centered
        this.layMain = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add a button control to the main layout
        this.btn = ui.addButton(this.layMain, "Show Popup")

        // Add a callback handler when the button is touched
        this.btn.setOnTouch( this.showMessage )
    }

    showMessage()
    {
        // Show a popup with additional action
        this.snackbar = ui.showPopup("Please login to continue", "Bottom,Center", "", "Login")

        // Add a callback handler when the action is touched
        this.snackbar.setOnAction( this.onAction )
    }

    onAction()
    {
        // Hide the popup when the action button is click
        this.snackbar.hide()
        ui.showPopup("Login is click. Show login Page.")
    }
}
from hybrid import ui

def OnStart():
    layMain = ui.addLayout("main", "Linear", "VCenter,FillXY")
    btn = ui.addButton(layMain, "Show Popup")
    btn.setOnTouch(showMessage)

def showMessage(event):
    global snackbar
    snackbar = ui.showPopup("Please login to continue", "Bottom,Center", "", "Login")
    snackbar.setOnAction(onAction)

def onAction():
    snackbar.hide()
    ui.showPopup("Login is click. Show login Page.")
Copy All       Run      

Methods

The following methods are available on the showPopup object:

getPosition() → Object
hide()
setOnAction( callback )
setOnClose( callback )
setPosition( vertical, horizontal )
show()
Number: Time in milliseconds. Pass this,  if you don't want the default auto hide duration.
Number: Sets or returns the duration of the popup in milliseconds.
String: “The message to display on the pop-up.”
String: “A comma separated Menu options. Values can be
Duration: `Short` `Long`
`Vertical Alignment: `Top` `Bottom`
`Horizontal Alignment: `Left` `Center` `Right`
`Action options: `Icon` or `HideOnAction`
`Transition`: `Grow` `Fade` `Slide` `Collapse` `Zoom`”
String: “Action button text.”
String: “Vertical alignment. Values can be `Top` `Bottom`”
String: “Horizontal alignment. Values can be `Left` `Center` and `Right`”
String: Sets or returns the text of the popup.
function()
pop.getPosition
Returns the position of the popup. The returned object is of the form `{ vertical, horizontal
pop.hide
Hide the popup
pop.setOnAction
Adds an action callback when the user touches the action button. The btnText param must be provided in order to create an action button
pop.setOnClose
Adds an onClose callback to your popup
pop.setPosition
Updates the position of the popup
pop.show
Show the popup