Error Toast changes

Aspose.Cells Product Family
1

How can I target a particular toast message Error one I want to customize it .
Can you help me with getting the particular toast class using xs.
For some modal I am using xs.Sheet.<modalName> .el.el

image.png (14.5 KB)

<div class="x-spreadsheet-toast" style="left: 394.402px; top: 255.265px;"><div class="x-spreadsheet-toast-header"><div class="x-spreadsheet-icon"><div class="x-spreadsheet-icon-img close"></div></div>error</div><div class="x-spreadsheet-toast-content">This cell or chart is protected. To make a change, you must first unprotect the sheet</div></div>

I want to target this toast and customize it.

2

@chetanepiq

To target and customize a specific toast message in your application, you can use JavaScript to select the modal element based on its class names. Here’s a code snippet that demonstrates how to achieve this:

// Select the error toast message
const errorToast = document.querySelector('.x-spreadsheet-toast');

// Customize the toast message
if (errorToast) {
    errorToast.style.backgroundColor = 'lightcoral'; // Change background color
    const toastContent = errorToast.querySelector('.x-spreadsheet-toast-content');
    if (toastContent) {
        toastContent.innerText = 'Your custom error message here'; // Change content
    }
}

This code selects the toast element with the class x-spreadsheet-toast and allows you to modify its style and content. Make sure to adjust the properties as needed to fit your design requirements.

If you have any specific customization in mind or need further assistance, feel free to share!

3

How can I make sure that x-spreadsheet-toast is always an errorToast?
Do you have a particular way to get this toast popup because I see this gets closed and opened on clicks how can I also target the same way ?

4

@chetanepiq
we will investigate your requirement and give feedback later.

5

@chetanepiq
the toast api is internal .
however it is very simple and common in js.
the detail code is

/* global document */
import { h } from './element';
import Icon from './icon';
import { cssPrefix } from '../config';

export function xtoast(title, content,callback) {
  const el = h('div', `${cssPrefix}-toast`);
  const dimmer = h('div', `${cssPrefix}-dimmer active`);
  const remove = () => {
    document.body.removeChild(el.el);
    document.body.removeChild(dimmer.el);
	if(callback)
	{callback();
	}
  };

  el.children(
    h('div', `${cssPrefix}-toast-header`).children(
      new Icon('close').on('click.stop', () => remove()),
      title,
    ),
    h('div', `${cssPrefix}-toast-content`).html(content),
  );
  document.body.appendChild(el.el);
  document.body.appendChild(dimmer.el);
  // set offset
  const { width, height } = el.box();
  const { clientHeight, clientWidth } = document.documentElement;
  el.offset({
    left: (clientWidth - width) / 2,
    top: (clientHeight - height) / 3,
  });
}

below is a typical usage:

	  xtoast('Error', 'The max length of the sheet name is 31', function () {
		      input.focus();
		  });

         ....
         xtoast('Tip', msg)
6

@chetanepiq
for your requirement,
we can support such feature:

// for example you can defined your own message tips 
xs.customToast=(msgtype,msg,callback)=>{
.....
.....
....}

if we find it is defined.
then we will call this customToast instead of the internal toast.

We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-1971

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.