Page 288 - Asterisk™: The Future of Telephony

The rest of our test.html simply contains an HTML body with a div element, which is
where we’ll place the configuration data when we get it. Note that the HTML body tag
has an onload attribute, which causes the browser to execute the localAjaxinit function
once the page has finished loading.

Now that we’ve created a new page, we need to edit cfgbasic.html to add this page as
a panel in the GUI. Open cfgbasic.html and search for a JavaScript function named
returnpanels and insert this code in the list of panels, where you would like your panel
to appear:
newpanel( ["Test", "test.html", "Test"]);
Now reload the GUI in your browser. You should see a new tab on the lefthand side
named Test that displays the configuration values for extensions.conf when clicked.
While there’s a lot more to learn about the AJAM interface and the Asterisk GUI, this
example should show just how easy it is to add new functionality to the GUI. In this
next example, we’ll show how simple it is to expose a setting from the configuration
files in the GUI.

Exposing configuration settings in the GUI
As explained earlier, one of the unique benefits of the Asterisk GUI over the other
graphical frontends to Asterisk is that it updates the configuration files in place, taking
special care not to overwrite or erase any extra settings you might have in your config-
uration files. To show just how easy it is to expose new settings in the GUI, we’ll add
a simple checkbox to the GUI to make it possible to set the nat setting in users.conf.
If you open the GUI and click on the tab labeled Users, the GUI loads the file named
users.html in the iframe. Let’s open up users.html (usually located in /var/lib/asterisk/
static-http/config) and begin modifying it to add our checkbox.
First, search near the top of the file where a variable named fieldnames is defined. This
variable contains a list of all of the field names that will be set by this page of the GUI.
Simply add nat to the end of the list, or add the following line directly below the current
definition for fieldnames.
fieldnames.push('nat');
This tells the Asterisk GUI that we want to be able to see the value of nat and to be able
to set it as well. In order to see or set the value, however, we need to add an element to
the HTML form. To do that, search users.html for the IAX checkbox, and add the
following lines between it and the CTI checkbox.

<tr>
<td align=right><input type='checkbox' id='nat'></td>
<td>NAT</td>
</tr>
Simply reload the page, and that’s all there is to it. With just a few lines of additional
code, we’re able to expose the nat setting to the GUI. It couldn’t be much simpler!

260 | Chapter 11: The Asterisk GUI Framework