User Friendly Error Popups

Hi just a point in the right direction rather than technical help. For a user login/ create user I want to display an error to let them now if invalid user or password etc. I can see the console catches the error but I cant see how to customise and display this.

I found the native.showAlert API and tried entering this into my config.lua

application ={    showRuntimeErrors = true,}

haven’t managed to get any customised popups with these although I do get runtime errors for example if I try to access a nil object (but these require fixing by me where as incorrect username password combo needs a nice message so the user knows whats going on)

Thanks

You’ll want to write your own code to make a popup.   You can easily achieve this with native.showAlert().

You can also try to use my ‘easy alert’ function from SSK (extracted below):

-- Easy alert popup -- -- title - Name on popup. -- msg - message in popup. -- buttons - table of tables like this: -- { { "button 1", opt\_func1 }, { "button 2", opt\_func2 }, ...} -- local function easyAlert( title, msg, buttons ) local function onComplete( event ) local action = event.action local index = event.index if( action == "clicked" ) then local func = buttons[index][2] if( func ) then func() end end --native.cancelAlert() end local names = {} for i = 1, #buttons do names[i] = buttons[i][1] end --print( title, msg, names, onComplete ) local alert = native.showAlert( title, msg, names, onComplete ) return alert end

Sample usage:

local function onChoice1() print("choice 1") end local function onChoice2() print("Choice2") end easyAlert( "The Title", "A test message", { { "Choice 1", onChoice1 }, { "Choice 2", onChoice2 }, { "OK", nil } } )

Great thank you looks like I wasn’t too far off thanks for the function/sample!

Ok I’m starting to lose some hair over this one !! :smiley: Im building on PC so have to go to phone to type email in forgot password box. When I do I get the error pop up box also on console(which shows invalid email address as should because its blank). Im using parse and when I add a valid password in the error popup box still appears (this works without it). When my handleRetrievePasswordButton event is called this is where I have configured the pop up for. I have tried to return event.errorMessage to return the text of the error but doesn’t seem to work.

So my question is

  1. Am I putting this in the wrong place?

  2. Is there a call I can make in the error popup box that gives the string of the error?

    local composer = require( “composer” ) local scene = composer.newScene() local widget = require( “widget” ) local utility = require( “utility” ) local ads = require( “ads” ) local params local myData = require( “mydata” ) local globals = require(“mod_globals”) local parse = require (“mod_parse”) local ForgotPasswordEmail local function easyAlert( title, msg, buttons ) local function onComplete( event ) local action = event.action local index = event.index if( action == “clicked” ) then local func = buttons[index][2] if( func ) then func() end end end local names = {} for i = 1, #buttons do names[i] = buttons[i][1] end local alert = native.showAlert( title, msg, names, onComplete ) return alert end local function handleRetrievePasswordButton( event ) if error then easyAlert( “The Title”, “A test message”,{ { “OK”, nil } } ) elseif ( “ended” == event.phase ) then parse:init({appId = globals.appId, apiKey = globals.apiKey}) parse.showStatus = true parse:requestPassword ( ForgotPasswordEmail.text, onRequestPassword) ForgotPasswordEmail:removeSelf() composer.removeScene( “ForgotPassword”, true ) composer.gotoScene(“userlogin”, { effect = “crossFade”, time = 333 }) end end local function handleReturntoLoginScreenButton( event ) if ( “ended” == event.phase ) then ForgotPasswordEmail:removeSelf() composer.removeScene( “ForgotPassword”, true ) composer.gotoScene(“userlogin”, { effect = “crossFade”, time = 333 }) end end function scene:create( event ) local sceneGroup = self.view params = event.params local background = display.newImage( “Background.png”, display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight ) sceneGroup:insert( background ) --ForgotPasswordEmail ForgotPasswordEmail = native.newTextField(display.contentCenterX*1, display.contentCenterY * 1.2, display.contentWidth /3, display.contentHeight/9) ForgotPasswordEmail.placeholder = “(Email)” ForgotPasswordEmail:setTextColor( 0, 0, 0 ) ForgotPasswordEmail.isEditable = true sceneGroup:insert( ForgotPasswordEmail ) – RetrievePasswordButton local RetrievePasswordButton = widget.newButton({ id = “RetrievePasswordButton”, defaultFile = “retrievepassword.png”, onRelease = handleRetrievePasswordButton }) RetrievePasswordButton.x = display.contentCenterX RetrievePasswordButton.y = display.contentCenterY *1.5 sceneGroup:insert( RetrievePasswordButton ) – Return to Login Screen local ReturntoLoginScreenButton = widget.newButton({ id = “ReturntoLoginScreenButton”, defaultFile =“backtologin.png”, onRelease = handleReturntoLoginScreenButton }) ReturntoLoginScreenButton.x = display.contentCenterX ReturntoLoginScreenButton.y = display.contentCenterY *1.7 sceneGroup:insert( ReturntoLoginScreenButton ) end function scene:show( event ) local sceneGroup = self.view params = event.params if event.phase == “did” then end end function scene:hide( event ) local sceneGroup = self.view if event.phase == “will” then end end function scene:destroy( event ) local sceneGroup = self.view end --------------------------------------------------------------------------------- – END OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- scene:addEventListener( “create”, scene ) scene:addEventListener( “show”, scene ) scene:addEventListener( “hide”, scene ) scene:addEventListener( “destroy”, scene ) return scene

Well, I can’t really be sure as I am not a parse user, but I did see something that made no sense to me:

Where is ‘error’ getting set?  It Looks like a global and with such a short name, I would not be surprised if you’ve defined it in more than one place for different meanings. 

I guess I’m saying, this code needs to change:

local function handleRetrievePasswordButton( event ) if error then easyAlert( "The Title", "A test message",{ { "OK", nil } } )

I think Im going to need to take a step back and learn more about the lua basics. I kinda got away with it till now but as I try to implement more difficult stuff its just not working. This seems like it should be so simple just cant get it to work :confused:

You’ll want to write your own code to make a popup.   You can easily achieve this with native.showAlert().

You can also try to use my ‘easy alert’ function from SSK (extracted below):

-- Easy alert popup -- -- title - Name on popup. -- msg - message in popup. -- buttons - table of tables like this: -- { { "button 1", opt\_func1 }, { "button 2", opt\_func2 }, ...} -- local function easyAlert( title, msg, buttons ) local function onComplete( event ) local action = event.action local index = event.index if( action == "clicked" ) then local func = buttons[index][2] if( func ) then func() end end --native.cancelAlert() end local names = {} for i = 1, #buttons do names[i] = buttons[i][1] end --print( title, msg, names, onComplete ) local alert = native.showAlert( title, msg, names, onComplete ) return alert end

Sample usage:

local function onChoice1() print("choice 1") end local function onChoice2() print("Choice2") end easyAlert( "The Title", "A test message", { { "Choice 1", onChoice1 }, { "Choice 2", onChoice2 }, { "OK", nil } } )

Great thank you looks like I wasn’t too far off thanks for the function/sample!

Ok I’m starting to lose some hair over this one !! :smiley: Im building on PC so have to go to phone to type email in forgot password box. When I do I get the error pop up box also on console(which shows invalid email address as should because its blank). Im using parse and when I add a valid password in the error popup box still appears (this works without it). When my handleRetrievePasswordButton event is called this is where I have configured the pop up for. I have tried to return event.errorMessage to return the text of the error but doesn’t seem to work.

So my question is

  1. Am I putting this in the wrong place?

  2. Is there a call I can make in the error popup box that gives the string of the error?

    local composer = require( “composer” ) local scene = composer.newScene() local widget = require( “widget” ) local utility = require( “utility” ) local ads = require( “ads” ) local params local myData = require( “mydata” ) local globals = require(“mod_globals”) local parse = require (“mod_parse”) local ForgotPasswordEmail local function easyAlert( title, msg, buttons ) local function onComplete( event ) local action = event.action local index = event.index if( action == “clicked” ) then local func = buttons[index][2] if( func ) then func() end end end local names = {} for i = 1, #buttons do names[i] = buttons[i][1] end local alert = native.showAlert( title, msg, names, onComplete ) return alert end local function handleRetrievePasswordButton( event ) if error then easyAlert( “The Title”, “A test message”,{ { “OK”, nil } } ) elseif ( “ended” == event.phase ) then parse:init({appId = globals.appId, apiKey = globals.apiKey}) parse.showStatus = true parse:requestPassword ( ForgotPasswordEmail.text, onRequestPassword) ForgotPasswordEmail:removeSelf() composer.removeScene( “ForgotPassword”, true ) composer.gotoScene(“userlogin”, { effect = “crossFade”, time = 333 }) end end local function handleReturntoLoginScreenButton( event ) if ( “ended” == event.phase ) then ForgotPasswordEmail:removeSelf() composer.removeScene( “ForgotPassword”, true ) composer.gotoScene(“userlogin”, { effect = “crossFade”, time = 333 }) end end function scene:create( event ) local sceneGroup = self.view params = event.params local background = display.newImage( “Background.png”, display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight ) sceneGroup:insert( background ) --ForgotPasswordEmail ForgotPasswordEmail = native.newTextField(display.contentCenterX*1, display.contentCenterY * 1.2, display.contentWidth /3, display.contentHeight/9) ForgotPasswordEmail.placeholder = “(Email)” ForgotPasswordEmail:setTextColor( 0, 0, 0 ) ForgotPasswordEmail.isEditable = true sceneGroup:insert( ForgotPasswordEmail ) – RetrievePasswordButton local RetrievePasswordButton = widget.newButton({ id = “RetrievePasswordButton”, defaultFile = “retrievepassword.png”, onRelease = handleRetrievePasswordButton }) RetrievePasswordButton.x = display.contentCenterX RetrievePasswordButton.y = display.contentCenterY *1.5 sceneGroup:insert( RetrievePasswordButton ) – Return to Login Screen local ReturntoLoginScreenButton = widget.newButton({ id = “ReturntoLoginScreenButton”, defaultFile =“backtologin.png”, onRelease = handleReturntoLoginScreenButton }) ReturntoLoginScreenButton.x = display.contentCenterX ReturntoLoginScreenButton.y = display.contentCenterY *1.7 sceneGroup:insert( ReturntoLoginScreenButton ) end function scene:show( event ) local sceneGroup = self.view params = event.params if event.phase == “did” then end end function scene:hide( event ) local sceneGroup = self.view if event.phase == “will” then end end function scene:destroy( event ) local sceneGroup = self.view end --------------------------------------------------------------------------------- – END OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- scene:addEventListener( “create”, scene ) scene:addEventListener( “show”, scene ) scene:addEventListener( “hide”, scene ) scene:addEventListener( “destroy”, scene ) return scene

Well, I can’t really be sure as I am not a parse user, but I did see something that made no sense to me:

Where is ‘error’ getting set?  It Looks like a global and with such a short name, I would not be surprised if you’ve defined it in more than one place for different meanings. 

I guess I’m saying, this code needs to change:

local function handleRetrievePasswordButton( event ) if error then easyAlert( "The Title", "A test message",{ { "OK", nil } } )

I think Im going to need to take a step back and learn more about the lua basics. I kinda got away with it till now but as I try to implement more difficult stuff its just not working. This seems like it should be so simple just cant get it to work :confused: