Making An Applet

Hello Monkey, v1.1

Now that we’ve got the basic applet built, lets make it a little bit more dynamic. The first thing that we’re going to do is create a text box that will allow the person who adds the applet to put in their own custom message. Now we could use another UI Widget for this, but we’ll use a text input instead to demonstrate how form elements can be used and styled within your ui.php file.

You may have noticed previously that we’re surrounding ui.php with a div called “vbx-applet”. This class allows elements inside the div to inherit styles that make the applet look good. One of the advantages of using this class is that we can add a class to our textarea called medium and have it automatically setup the width and height of the textarea. For textareas there are 3 styles you can use: small, medium and large. In this case we’ll go with medium.

<div class="vbx-applet monkey-applet">
	<h2>Create A Custom Message</h2>
	<p>Entere in a custom message that your callers will be greeted by.</p>
	<textarea class="medium" name="prompt-text"><?php 
		echo AppletInstance::getValue('prompt-text') 

	<br />
	<h2>Select An Action For The Caller</h2>
	<?php echo AppletUI::DropZone('primary'); ?>

Now we need to move onto our TwiML. Since we’ve added a textarea to the UI we need to add something to get the value of the textarea in the TwiML. We can do this by using AppletInstance::getValue(). AppletInstance::getValue() can be used to get the value of any custom element you create, all you need to do is put the name of the element in and it will pull out the value. In this case we’re going to add the text from the textarea into a custom say.

// The response object constructs the TwiML for our applet
$response = new TwimlResponse;

// In order to add the custom greeting the callflow creator typed 
// in we need to get the value of prompt-text. We can do this by 
// using AppletInstance::getValue()

// $primary is getting the url created by what ever applet was put
// into the primary dropzone
$primary = AppletInstance::getDropZoneUrl('primary');

if(!empty($primary)) {
	// As long as the primary dropzone is not empty add the redirect 
	// twiml to $response

// This will create the twiml for hellomonkey

If you’d like to add an icon for your applet to match the other applets you can create an image file that is 24px × 24px and save it as icon.png. You should place the image file at OpenVBX/plugins/hello-monkey/applets/monkey/. Now when you go to your applet your icon should appear.

You can use this icon of a monkey we made for the Hello Monkey applet.

Hello Monkey v1.0 Hello Monkey v1.2