Making a button to open a popup

Step 1: create a html template for your popup

<!-- test/helloWorld.html -->
<div>
  <h1>
    <span data-bind="text: greeting"></span>
  </h1>
</div>

Note: It is often useful to define your html template first and create your knockout viewModel in js later. This makes sure the viewModel is modelled after the html and not the other way around, making the html a lot simpler.

Step 2: load the button-trigger library

// anchor:custom-variables:start
var Button = require('nsx/trigger/button-trigger');
// anchor:custom-variables:end

Step 3: define your popup in a function

function defineHelloWorldPopup(toolbar) {
  // Define a button to the toolbar
  var showPopupBtn = toolbar.defineButton({
    label: "say hello"
  });

  // Define a viewModel for your popup
  var viewModel = {
    greeting: "Hello World!"
  }

  // Define the popup
  Popup.definePopup({
    trigger: showPopupBtn, // define our button as the trigger
    view: "test/helloWorld",  // points to the html file
    viewModel: viewModel,
    title: "Hello"
  });
}

Step 4: call your function from the buildPage function

// anchor: custom-page-after: start
defineHelloWorldPopup(toolbar);
// anchor: custom-page-after: end