How to customize Ext.toast

[Mehmet Emin]

How can I customize the message of Ext.toast to display as in this picture?

Thanks

[Sherzod]

On 7/14/2020 at 6:41 PM, Mehmet Emin said:

How can I customize the message of Ext.toast to display as in this picture?

Hello,

Are you using custom component or custom JS code?

[Mehmet Emin]

I am using like this:

UniSession.addJS('Ext.toast({message: "Hai cancellato il tuo appuntamento.", timeout: 2000});');

[Mehmet Emin]

@Sherzod by component do you mean a uniGUI component or ExtJS component?

If you recommend a component I will start using it instead of ExtJS.toast.

Thanks

[Sherzod]

Hello,

What is your type of app?

[Mehmet Emin]

Mobile Modern toolkit / material theme

[Sherzod]

29 minutes ago, Mehmet Emin said:

Mobile Modern toolkit / material theme

I'm analyzing.

[Sherzod]

On 7/14/2020 at 6:41 PM, Mehmet Emin said:

How can I customize the message of Ext.toast to display as in this picture?

   UniSession.AddJS(
     'Ext.toast({'+
     '   message: "Hai cancellato il tuo sappuntamento.<span onclick=\"alert(''Undo'')\" style=\"color: #81A8E7; font-weight: bold\"> Undo </span>'+
     '             <i onclick=\"Ext.toast().hide(); alert(''Close'')\" style=\"padding-top: 0\" class=\"fa fa-times\" aria-hidden=\"true\"></i>",'+
     '   timeout: 50000'+
     '})'
   );

 

[Mehmet Emin]

I appreciate your taking the time. Thank you!

[donlego]

i use this function the toast messgae is show , but when i click the hide/close button the toast message is still show ,

how to close/hide the toast message ?

unigui version 1541

[Sherzod]

Hello, 

Desktop, mobile? 

[donlego]

14 minutes ago, Sherzod said:

Hello, 

Desktop, mobile? 

desktop

[Sherzod]

 

[donlego]

sorry , form the link you post , i dont find how to close the toast message with the button on toast message,

i want when click the close button , the toast message is close/hide/disapear 

 

 

here is my procedure 

 

Quote

class procedure PlayWIthMessage.SHOW_TOAST(act: integer; amsg: string);
var acol,apesan,img:String;

begin
case act of
 0:acol:='red';
 1:acol:='#3D7A00';
 2:acol:='yellow';

end;

 amsg:= StringReplace(amsg, #13#10, '<br>', [rfReplaceAll]);

    apesan := apesan+'<table style=margin-top:-18px ><td><i class=\"fa fa-info\" aria-hidden=\"true\">   </i>     &nbsp;&nbsp;&nbsp; </td>&nbsp;&nbsp;<td>'+amsg +'</td></table><span style=\"float:right;margin-top:-18px\"><i  onclick=\"Ext.toast().hide();\"   class=\"fa fa-times\" aria-hidden=\"true\"></i></span>';
    UniSession.AddJS('Ext.toast ({html: "<font color=white style=font-size:15px;font-family:segoe ui;>' + apesan +
 '</font>", align: "br" ,header: false, width:400, autoCloseDelay: 150000, hideDuration: 150000, modal: false, bodyStyle:{"background-color":"'+acol+' !important;box-shadow:'+acol+' !important; border-color: 0px solid transparent;padding:0px 0px 0px 0px !important;top:180px !important"} });');

      end;
 

 

[Sherzod]

23 minutes ago, donlego said:

i dont find how to close the toast message

I provided a link above to point out that some properties are different in mobile and desktop versions.

[donlego]

43 minutes ago, Sherzod said:

 

from the that link , i just find to restart app

no code for close the toast message

[Sherzod]

 

[Sherzod]

OK, I'll try to look again...

[donlego]

1 hour ago, Sherzod said:

OK, I'll try to look again...

ok, thanks 

[donlego]

one more think try to set toast align to right center

align:r 

try set the align with r , the toast is not show, no error on console

can the toast align set to center right ?

 

[donlego]

up

[Sherzod]

23 minutes ago, donlego said:

up

Okay.

[Sherzod]

On 3/6/2023 at 1:44 PM, donlego said:

i want when click the close button , the toast message is close/hide/disapear 

For example:

procedure TMainForm.UniButton1Click(Sender: TObject);
var
  acol,
  apesan,
  amsg: string;
  genMsgID: string;
begin

  amsg := 'Hello';
  acol:='#3D7A00';
  genMsgID := FormatDateTime('yyyymmddhhnnsszzz', Now());

  apesan := apesan+'<table style=margin-top:-18px ><td><i class=\"fa fa-info\" aria-hidden=\"true\">   </i>     &nbsp;&nbsp;&nbsp; </td>&nbsp;&nbsp;<td>'+amsg +'</td></table><span style=\"float:right;margin-top:-18px\"><i  onclick=\"window._msg'+ genMsgID +'.destroy();\"   class=\"fa fa-times\" aria-hidden=\"true\"></i></span>';

  UniSession.AddJS('window._msg'+ genMsgID +' = Ext.toast ({html: "<font color=white style=font-size:15px;font-family:segoe ui;>' + apesan +
   '</font>", align: "br" ,header: false, width:400, autoCloseDelay: 150000, hideDuration: 150000, modal: false, bodyStyle:{"background-color":"'+acol+' !important;box-shadow:'+acol+' !important; border-color: 0px solid transparent;padding:0px 0px 0px 0px !important;top:180px !important"} });');

end;

 

[donlego]

7 minutes ago, Sherzod said:

For example:

procedure TMainForm.UniButton1Click(Sender: TObject);
var
  acol,
  apesan,
  amsg: string;
  genMsgID: string;
begin

  amsg := 'Hello';
  acol:='#3D7A00';
  genMsgID := FormatDateTime('yyyymmddhhnnsszzz', Now());

  apesan := apesan+'<table style=margin-top:-18px ><td><i class=\"fa fa-info\" aria-hidden=\"true\">   </i>     &nbsp;&nbsp;&nbsp; </td>&nbsp;&nbsp;<td>'+amsg +'</td></table><span style=\"float:right;margin-top:-18px\"><i  onclick=\"window._msg'+ genMsgID +'.destroy();\"   class=\"fa fa-times\" aria-hidden=\"true\"></i></span>';

  UniSession.AddJS('window._msg'+ genMsgID +' = Ext.toast ({html: "<font color=white style=font-size:15px;font-family:segoe ui;>' + apesan +
   '</font>", align: "br" ,header: false, width:400, autoCloseDelay: 150000, hideDuration: 150000, modal: false, bodyStyle:{"background-color":"'+acol+' !important;box-shadow:'+acol+' !important; border-color: 0px solid transparent;padding:0px 0px 0px 0px !important;top:180px !important"} });');

end;

 

it's work thanks very much ,

how with the align position , is there any solution for align:r

right center position

 

[Sherzod]

8 minutes ago, donlego said:

is there any solution for align:r

right center position

Excuse me, what should it look like?