Before we create our custom Virtual War Room page, let's create a widget that grabs meeting information, as well as a few other details from the Virtual War Room record.

Navigate to Service Portal | Widgets from the application navigator, to get to the widget list. Click the New button in the top-right corner to create a new widget record.

Let's name our widget War Room Meeting Details. Now that the widget's been created, scroll down to the Related Links section, and click Open in Widget Editor.

On the widget editor, let's start by adding a little HTML. In the HTML Template field, add:

<div>
  <div class="test">
    Hello, World!
  </div>
</div>

Now that we have some content, let's enable the widget preview. Click Save at the top right or hit Ctrl + S, and then click the hamburger menu next to the Save button.

Click the checkbox next to Enable Preview, and click the eye icon next to Save.

This widget is going to be dynamic, and will pull data from the URL to locate the correct record and appropriate data. We can do this using the $sp.getParameter() method in the server script. Since we're currently not on a page that has the correct data in the URL, we're going to comment out those lines, and add in some default values to use while we're in the widget editor.

Add the following script to the Server Script field:

(function() {
    // data.table = $sp.getParameter('table');
    // data.sys_id = $sp.getParameter('sys_id');
    
    /** testing defaults - 
    these are values we'll use 
    until we put the widget on the page.
    */
    data.table = 'u_virtual_war_room';
    data.sys_id = 'cd4fdd084f560300993533718110c7a7';
    
    // query for the current record
    var gr = new GlideRecord(data.table);
    gr.get(data.sys_id);
    
    data.number = gr.getValue('number');
})();

In the preceding script, we're grabbing some information using the table and sys_id of the current record, so make sure to update the value of data.sys_id to match the sys_id of a Virtual War Room record in your instance. This is just a static value pointing to any Virtual War Room record for testing purposes.

To display this data in the widget itself, we need to add a call to that dynamic variable. Edit the HTML to display this:

<div>
  <div class="test">
    Hello, World!
  </div>
  <div class="war-number">
    {{data.number}}
  </div>
</div>

By using data.number in the HTML above, we're accessing the number property of the data object, which is transferred to and from the server, with data related to our request.

With the above configuration, we're grabbing information from the server to display in our widget using Angular. Congratulations!

We need more information though—we specifically want to grab meeting information from the Appointment table for our Virtual War Room.

In the server script, we need to query the Appointment table and retrieve the appointments where the Task field matches the current Virtual War Room (the one whose sys_id we passed in via the URL), and grab dynamic values from each of them. Since there can be multiple appointments, we want to order the list by the Starts field.

Add the getAppointments() function to your server script like so:

(function() {
    
    // data.table = $sp.getParameter('table');
    // data.sys_id = $sp.getParameter('sys_id');
    
    /** testing defaults - 
    these are values we'll use 
    until we put the widget on the page.
    */
    data.table = 'u_virtual_war_room';
    data.sys_id = 'cd4fdd084f560300993533718110c7a7';
    
    // query for the current record
    var gr = new GlideRecord(data.table);
    gr.get(data.sys_id);
    
    data.number = gr.getValue('number');
    data.appointments = getAppointments(data.sys_id);
    
    // get meeting information from Appointment table
    function getAppointments(id) {
        var appointment = {};
        var appointments = [];
        var grAppt = new GlideRecord('itil_appointment');
        grAppt.addQuery('task', id);
        grAppt.orderBy('starts');
        grAppt.query();

        while (grAppt.next()) {
            /** for each appointment found, 
            construct an object with the 
            values for that appointment 
            */
            appointment = {};
            appointment.subject = grAppt.getValue('subject');
            appointment.startValue = grAppt.getValue('starts');
            appointment.starts = grAppt.getDisplayValue('starts');
            appointment.ends = grAppt.getDisplayValue('ends');
            appointment.notes = grAppt.getValue('notes');
            // push each object to the array.
            appointments.push(appointment);
        }
        return appointments;
    }
    
})();

Next, we'll want to change the HTML to display the information we've gathered from each appointment. Rather than write a block of HTML for each of the potential meetings, we're going to iterate over the data.appointments array using the ng-repeat angular attribute:

<div>
  <div class="war-number">
    {{data.number}}
  </div>
  <div class="meeting-info" ng-repeat="appointment in data.appointments">
    <h4>
      {{appointment.subject}}
    </h4>
    <div class="meeting-date">
      Scheduled: {{appointment.starts}} - {{appointment.ends}}
    </div>
    <div class="meeting-notes">
      {{appointment.notes}}
    </div>
  </div>
</div>

We now have a widget that displays the appropriate meeting information! It's time to edit our Virtual War Room page, and include the meeting information as part of it. Now that we're done testing without the context of the page, comment out the test data values for data.table and data.sys_id, and uncomment the proper values. The beginning of our server script should now look like this:

(function() {
    
    data.table = $sp.getParameter('table');
    data.sys_id = $sp.getParameter('sys_id');
    
    /** testing defaults - 
    these are values we'll use 
    until we put the widget on the page.
    */
    // data.table = 'u_virtual_war_room';
    // data.sys_id = 'cd4fdd084f560300993533718110c7a7';
    
    // query for the current record
    var gr = new GlideRecord(data.table);
    gr.get(data.sys_id);
    
    data.number = gr.getValue('number');
    data.appointments = getAppointments(data.sys_id);
    
    // get meeting information from Appointment table
    function getAppointments(id) {
        var appointment = {};
        var appointments = [];
        var grAppt = new GlideRecord('itil_appointment');
        grAppt.addQuery('task', id);
        grAppt.orderBy('starts');
        grAppt.query();

        while (grAppt.next()) {
            /** for each appointment found, 
            construct an object with the 
            values for that appointment 
            */
            appointment = {};
            appointment.subject = grAppt.getValue('subject');
            appointment.startValue = grAppt.getValue('starts');
            appointment.starts = grAppt.getDisplayValue('starts');
            appointment.ends = grAppt.getDisplayValue('ends');
            appointment.notes = grAppt.getValue('notes');
            // push each object to the array.
            appointments.push(appointment);
        }
        return appointments;
    }
})();

Go to https://<instance>.service-now.com/ sp?id=war&table= u_virtual_war_room&sys_id=<sys_id>. Remember to replace < sys_id > with the sys_id of the war room, and of course, <instance> with your instance name. While on that page, Ctrl + right click the Form widget to bring up the widget context menu, and select Page in Designer.

We currently have a Form widget in the middle of the size 12 column in one container. Instead of this, we want our War Room Meeting Detail widget in the size 12 column in the top container, and we want to add another container with two size 6 columns below.

Inside the new columns, add the Ticket Conversations widget to the left column, and add/move the Form widget to the right column of the second container. Refresh the portal page to see the new layout and content. It should look like this when you're all finished: