Tech Tip: Add a dialog box for quick data entry

For quick data entry, when you only have 1 or 2 new fields to collect, a pop-up Dialog Box is a create tool that lets the user stay on the screen. No navigation is required which makes it even easier to implement. Let’s take a look at how to create one!

In your application, you’ll have to edit a view and it’s corresponding controller to create the pop-up. In the view, you can add a button that will trigger the pop-up. In my application, I added the button to my header toolbar. To do this, after you define your Page, but before you define the page <content>, add <headerContent> tags. This will create the controls in the toolbar where the title is displayed. Inside the open and closing <headerContent> tags, you can add the button control. Define an icon and/or so text to indicate what the button will do. Don’t forget to define the press property. This is important for the controller.

Here’s what my view code looks like for my button.

<headerContent>
  <Button 
    icon="sap-icon://settings" 
    text="Change Event" 
    press="onPress" 
    tooltip="Change Event Hashtag to Search" />
</headerContent>

And this is what my view looks like when I run my application.

Once you are happy with the button placement, you need to define the press function in the corresponding controller. I named my press property as “onPress”, so my function declaration in my controller will be:

onPress: function() {
}

The press function will create a Dialog control. You need to define the control in Javascript, just like you would if you were creating your views in JS. I always life to save the state of “this” before manipulating the dom. You can do this by adding the following code below to the beginning of your function.

var self = this;

Declare a new sap.m.Dialog. Here’s the scaffolding of the control:

  var dialog = new sap.m.Dialog({
    title: '',
    type: '',
    content: [ ],
    beginButton: new sap.m.Button({
    }),
    endButton: new sap.m.Button({
    }),
    afterClose: function() {
    }
  });

The title is the message that appears at the top of your Dialog Box. Make this descriptive but not too long.

title: 'Change Event Search',

The type defines the standard size and styling of the dialog box.

type: 'Message',

The content array is where you put the controls you want to display in the dialog box. In my example, I just have a Label and an Input field. In the input field, you can provide the labelFor to match the ID of the control the label is for. The input field is defined by providing an ID, the width and placeholder properties, and the liveChange event for the control. Using the liveChange event, you can enable and disable the begin buttons, making the field “required”.

content: [
      new sap.m.Label({ text: 'Event Hashtag', labelFor: 'event'}),
      new sap.m.Input('event', {
        liveChange: function(oEvent) {
          var eventName = oEvent.getParameter('value');
          var parent = oEvent.getSource().getParent();

          parent.getBeginButton().setEnabled(eventName.length > 0);
        },
        width: '100%',
        placeholder: 'Add Text from Hashtag (required - do not include #)'
      })
    ],

The beginButton aggregation defines which button (only 1) to show right to left in the footer of the dialog box. Define a new Button control and set the text and enabled properties. By starting the button off as disabled, you can require an input field. Define the press function to save the data. In my example, I am saving the data to a model, as it is only relevant in the application context when the application is running. I do not need to save state. If you want to persist the data to a database that was entered, add that to the press function. Last of all, you wan to close the dialog box, by calling the dialog.close() method.

beginButton: new sap.m.Button({
      text: 'Submit',
      enabled: false,
      press: function () {
        var sText = sap.ui.getCore().byId('event').getValue();
        var event ={
          "eventName": sText
        };
        var searchTerm = new sap.ui.model.json.JSONModel();
              searchTerm.setData(event);
        sap.ui.getCore().byId("__xmlview0").setModel(searchTerm);
        dialog.close();
      }
    }),

The endButton aggregation creates a button on the left side of the dialog box. This is an opportunity to provide the end user an exit path. It allows you to add a cancel button. Define a new button, provide the text properties, and add a press function that will just close the dialog box.

endButton: new sap.m.Button({
      text: 'Cancel',
      press: function () {
        dialog.close();
      }
    }),

The last thing to do is set the afterClose event. This event is fired when dialog.close() is called. Here you want to destroy the dialog box to free up the DOM and memory.

afterClose: function() {
      dialog.destroy();
    }

Last thing to do is actually open the dialog box. By calling dialog.open(), the dialog box will be loaded. You want to call the open after the dialog box has been defined.

dialog.open();

In the end, your onPress function should look a little like this below.

onPress: function(){
  var self = this;
  var dialog = new sap.m.Dialog({
    title: 'Change Event Search',
    type: 'Message',
    content: [
      new sap.m.Label({ text: 'Event Hashtag', labelFor: 'event'}),
      new sap.m.Input('event', {
        liveChange: function(oEvent) {
          var eventName = oEvent.getParameter('value');
          var parent = oEvent.getSource().getParent();

          parent.getBeginButton().setEnabled(eventName.length > 0);
        },
        width: '100%',
        placeholder: 'Add Text from Hashtag (required - do not include #)'
      })
    ],
    beginButton: new sap.m.Button({
      text: 'Submit',
      enabled: false,
      press: function () {
        var sText = sap.ui.getCore().byId('event').getValue();
        var event ={
          "eventName": sText
        };
        var searchTerm = new sap.ui.model.json.JSONModel();
              searchTerm.setData(event);
        sap.ui.getCore().byId("__xmlview0").setModel(searchTerm);
        dialog.close();
      }
    }),
    endButton: new sap.m.Button({
      text: 'Cancel',
      press: function () {
        dialog.close();
      }
    }),
    afterClose: function() {
      dialog.destroy();
    }
  });
  dialog.open();	
}

For more information on the Dialog box control, check out the documentation on UI5 Explored here.