Forum | Appery.io

You say..1) Add Panel to page. Where can I find the Panel component ?

Sorry, the Panel has been renamed to HTML component.

That worked.

Any suggestions on how I can make this reusable code to be used throughout my app. I don't what to keep adding HTML throughout my app. It would be ideal for me to use this instead of the 'alert' dialog.

You can try to create Custom Component from this panel and JS-code.

Can you please provide an example of this.

Thank you.

Sorry, don't have code sample. It should be coded by you.

Of course, it will be coded by me, but you surely must have some example. I am sure the entire community would appreciate your help.

Can you not help out a newbee ?

Hello, as asked above, here is code of dialog custom component.

Use it as body of HTML component.

pre
<div data-role="popup" data-dismissible="false" data-overlay-theme="a" data-theme="c" style="max-width:400px;" id="myDialog" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1 class="dlg_caption">&nbsp;<&#47;h1>
<&#47;div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">&nbsp;<&#47;h3>
<p class="dlg_text">&nbsp;<&#47;p>
<a href="#" data-role="button" class="okButton" data-inline="true" data-theme="c">OK<&#47;a>
<a href="#" class="noButton" data-role="button" data-inline="true" data-transition="flow" data-theme="b">NO<&#47;a>
<a href="#" class="cancelButton" data-role="button" data-inline="true" data-transition="flow" data-theme="b">Cancel<&#47;a>
<&#47;div>
<&#47;div>

<script>
function MessageDialog( caption, title, text, options ){
function closePopup( next ){
return function( event ){
next&#46;apply( this, arguments );
$( '#myDialog' )&#46;popup( "close" );
}
}
var $dlg = $( '#myDialog' );
options = $&#46;extend({}, {
onOK: closePopup( $&#46;noop ),
onNO: null,
onCancel: null
}, options)

$dlg&#46;find( '&#46;cancelButton' )&#46;toggle( $&#46;isFunction(options&#46;onCancel) );
$dlg&#46;find( '&#46;noButton' )&#46;toggle( $&#46;isFunction(options&#46;onNO) );

$dlg&#46;find( '&#46;okButton' )&#46;off('vclick')&#46;on({ vclick: closePopup( options&#46;onOK )});
$dlg&#46;find( '&#46;noButton' )&#46;off('vclick')&#46;on({ vclick: closePopup( options&#46;onNO ) });
$dlg&#46;find( '&#46;cancelButton' )&#46;off('vclick')&#46;on({ vclick: closePopup( options&#46;onCancel ) });

$dlg&#46;find( '&#46;dlg_caption' )&#46;text( caption '' );
$dlg&#46;find( '&#46;ui-title' )&#46;text( title '' );
$dlg&#46;find( '&#46;dlg_text' )&#46;text( text || '' );

$dlg&#46;popup( "open" );
}
<&#47;script>
/pre
And create custom component.

After this:

ul
liYou can create simple alert as:
preMessageDialog( 'MyAppName', 'Alert Text' );/pre/li
liAlert with additional text:
preMessageDialog( 'MyAppName', 'Alert Bold Text', 'Additional text' );/pre/li
liDialog with OK/NO buttons:
preMessageDialog( 'MyAppName', 'Alert Text', false, {
onOK: function() { &#47;* useful code &#47; },
onNO: function() { &#47; useful code &#47; }
} );/pre/li
liDialog with OK/Cancel buttons:
preMessageDialog( 'MyAppName', 'Alert Text', false, {
onOK: function() { &#47; useful code &#47; },
onCancel: function() { &#47; useful code &#47; }
} );/pre/li
liOr dialog with OK/NO/Cancel buttons:
preMessageDialog( 'MyAppName', 'Alert Text', false, {
onOK: function() { &#47; useful code &#47; },
onNO: function() { &#47; useful code &#47; },
onCancel: function() { &#47; useful code *&#47; }
} );/pre/li

Of Course you can replace 'MyAppName' with constant which defined somewhere else.
And there is no need to add code for closing popup. Every action is wrapped by code for closing popup./ul

LOVE THIS! Thank you!

For some reason though, my caption just says my title text. Can't figure it out. Any thoughts?

Hello! Please clarify what title text? Is it bound with code above?