how to override html code in 403 business exception modal #3760

5 Answer(s)

• 

  0

  berkansasmaz created 4 years ago

  Support Team .NET Developer

  ABP uses abp.message.error to show errors and sweetalert2 is used in its infrastructure. So I think you can do this with Sweatalert2's configurations. For example:

  $(function () {
      abp.libs.sweetAlert.config.error.footer = "<button type='button' id='Copy Log' class='swal2-cancel swal2-styled'>Download Log</button>"
      abp.libs.sweetAlert.config.error.didOpen = () => {
          var errorDetails = Swal.getHtmlContainer();
          console.log(errorDetails);
      }
  });
  

  Note: As far as I know, sweetalert2 allows you to change the entire error(or other default templates) template as well.

  Result:

  

  Note: If you want to see the detail and stack trace of the error in modal like me, you can do this as in the code below:

  Configure< AbpExceptionHandlingOptions >(options =>
  {
      options.SendExceptionsDetailsToClients = true;
      options.SendStackTraceToClients = true;
  });
  

  For more information:

  1. https://docs.abp.io/en/abp/latest/UI/AspNetCore/JavaScript-API/Message#sweetalert-configuration
  2. https://sweetalert2.github.io/

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  ElifKaya created 4 years ago

  ABP uses abp.message.error to show errors and sweetalert2 is used in its infrastructure. So I think you can do this with Sweatalert2's configurations. For example:

  $(function () { 
      abp.libs.sweetAlert.config.error.footer = "<button type='button' id='Copy Log' class='swal2-cancel swal2-styled'>Download Log</button>" 
      abp.libs.sweetAlert.config.error.didOpen = () => { 
          var errorDetails = Swal.getHtmlContainer(); 
          console.log(errorDetails); 
      } 
  }); 
  

  Note: As far as I know, sweetalert2 allows you to change the entire error(or other default templates) template as well.

  Result:

  

  Note: If you want to see the detail and stack trace of the error in modal like me, you can do this as in the code below:

  Configure< AbpExceptionHandlingOptions >(options => 
  { 
      options.SendExceptionsDetailsToClients = true; 
      options.SendStackTraceToClients = true; 
  }); 
  

  For more information:

  1. https://docs.abp.io/en/abp/latest/UI/AspNetCore/JavaScript-API/Message#sweetalert-configuration
  2. https://sweetalert2.github.io/

  How to trigger Copy Log button click for this solution, can you give an example? Because, it can not be triggered.

  $(function () { abp.libs.sweetAlert.config.error.footer = "<button type='button' id='Copy Log' class='swal2-cancel swal2-styled'>Download Log</button>" abp.libs.sweetAlert.config.error.didOpen = () => { var errorDetails = Swal.getHtmlContainer(); console.log(errorDetails); } });

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  berkansasmaz created 4 years ago

  Support Team .NET Developer

  How to trigger Copy Log button click for this solution, can you give an example? Because, it can not be triggered.

  I think you can do this in your globally used script file by using the id you gave to the button.

  Note: If you don't have a global js file, you can do it similarly to the global.css' config.

  $( "#DownloadLog" ).click(function() {
    alert( "Handler for .click() called." );
  });
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  ElifKaya created 4 years ago

  How to trigger Copy Log button click for this solution, can you give an example? Because, it can not be triggered.

  I think you can do this in your globally used script file by using the id you gave to the button.

  Note: If you don't have a global js file, you can do it similarly to the global.css' config.

  $( "#DownloadLog" ).click(function() { 
    alert( "Handler for .click() called." ); 
  }); 
  

  Actually, we tried like this but it doesn't work

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  berkansasmaz created 4 years ago

  Support Team .NET Developer

  Sorry, my fault. I expected this to work, but it didn't. I tested the code below. Can you try?

      abp.libs.sweetAlert.config.error.footer = "<button type='button' id='DownloadLog' class='swal2-cancel swal2-styled'>Download Log</button>"
      abp.libs.sweetAlert.config.error.didOpen = () => {
          $("#DownloadLog").click(function() {
              console.log("Test");
          });
      }
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel