Creating a Popup Message Box for Oracle JET Forms

Sometimes the end-user just wants to be reassured that you heard them. Recently I needed a pop-up confirmation message for an Oracle JET demo, something some call “toast.”

The inner Offcanvas Dismissal cookbook entry provided a good example for what I was looking for, albeit revealing from the side edge instead of the top.

The idea is that you wrap the whole page component in a oj-offcanvas-outer-wrapper and then wrap the pop-up toast message and content you want to overlay in an oj-offcanvas-inner-wrapper. Finally the “offcanvas” content is wrapped in a div with a unique ID and one of four oj-offcanvas-xxxx edges (id="innerDrawer" and oj-offcanvas-top in our example code). This content is hidden by default, but you can reveal it with a call such as oj.OffcanvasUtils.open(self.innerDrawer) when you’re ready to show the message.

How does it know what to show? Because that self.innerDrawer is an object we pass in that points at the CSS selector for our inner drawer (there are other options for OffcanvasUtils() to play with in the JSFiddle below, too):

//offcanvas options
  this.innerDrawer =
    {
      "displayMode": "overlay",
      "selector": "#innerDrawer"
    };

The confirmation message in our example pulls data from the observables in the form, but it could instead show data that returned from an API call initiated by the submit button. The normally-hidden fields in the innerDrawer could be bound to any data in your viewModel, since it only reveals when you choose to call oj.OffcanvasUtils.open().