Oracle Apex中使用SweetAlert的动态操作点击取消后如何终止后续动作

步骤1：调整动态操作基础配置 #

• 打开你当前调用SweetAlert的「执行JavaScript代码」动作的设置面板
• 找到执行选项分类，开启「等待结果」开关，这个配置会告诉APEX等待当前JS代码的异步操作完成后，再决定是否执行后续动作

步骤2：修改SweetAlert的JS代码 #

核心改动是把整个SweetAlert的Promise链返回给APEX，用户点确认时返回成功状态允许后续动作执行，点取消时返回失败状态终止所有后续动作，修改后代码如下：

const swalWithBootstrapButtons = Swal.mixin({
  customClass: {
    confirmButton: 'btn btn-success',
    cancelButton: 'btn btn-danger'
  },
  buttonsStyling: false
})

// 这里添加return，把Promise返回给APEX
return swalWithBootstrapButtons.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
  reverseButtons: true
}).then((result) => {
  if (result.isConfirmed) {
    swalWithBootstrapButtons.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
    // 确认状态返回成功，允许后续动作执行
    return Promise.resolve()
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    swalWithBootstrapButtons.fire(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
    // 取消状态返回失败，终止所有后续动作
    return Promise.reject()
  }
  // 其他关闭情况（比如点击弹窗外部关闭）也返回失败
  return Promise.reject()
})

补充说明 #

如果需要在用户点击取消后执行特定逻辑，可以在当前动态操作下新增「错误」分支的动作，这些动作只会在JS返回失败状态时触发。

内容的提问来源于stack exchange，提问作者Ricardo Pinheiro