Application Flow

The core concepts of creating a good application flow in the Appzio platform.

Basic Menuid Concepts

Navigation in Appzio is really different from what you usually do in web or mobile applications. The concept is centered around the idea of branches and actions. By opening and completing actions you create the flow for the users. Often you will want to hide/show certain components on the screen when an element is clicked or a form is submitted. This is done mainly by using the menuid.

The menu id is a variable that is passed to each action and contains an identifier or information that the action could use. There are a couple of ways that you can pass the menuid. One of them is directly attaching it to a button. In fact the button won’t be rendered if it doesn’t have the id property attached to it.

$this->getTextbutton('Submit', array('id' => 'save-form-data'));

There are a few things that are going on here and you need to understand well in order to use the platform to it’s maximum potential. What is going to happen here is that the current action is going to be re-initialized, but the id of the button will be passed as a menuid to the action. Now you can use conditional statements and execute additional logic based on the menuid.

// The form is submitted, save the data
if ($this->menuid == 'save-form-data') {
    ...
}
// If there are multiple buttons that could pass data
switch ($this->menuid) {
    ...
}

This is useful not just for submitting forms but when you want to present the same content in another way. A good example is editing a profile – you will be executing the same queries and displaying the same data but in a form. Another possible application is using it to sneak in additional information in the UI – such as error and success messages.

Menuid on other elements

Often you will want to change the state of the UI when the user clicks on an image, text or some other component. While those components don’t accept the id property they can have an onclick object passed to them. This is better explained in the section on Menu Syntax.

$onclick = new stdClass();
$onclick->id = 'toggle-status';
$onclick->action = 'submit-form-content';

The id of the onclick object is what will be passed to the menuid property. Something important is that if you want to re-initialize the same view, the onclick’s action property must be ‘submit-form-content’. There are different onclick actions that control the flow in different ways.

Passing parameters

When you want to pass parameters to actions you should again use the menuid. This way you can get values from it and load data from the database, execute a query, delete a record etc. A good example here is rendering a list of items and attaching an onclick object to each one.

Something important is that an action can render multiple layouts. Meaning that one action can display both a list of records and single record information depending on the menuid that is passed. What is passed to the client is only what is bound to the data object on the controller so you can define completely different layouts. This is a common practice in existing actions and components.

Example

// Displaying a list of post titles with an onclick object bound to them
foreach ($posts as $post) {
    $onclick = new stdClass();
    $onclick->action = 'submit-form-content';
    $onclick->id = 'show-post-' . $post->id;

    $this->data->scroll[] = $this->getText($post->title, array('onclick' => $onclick));
}

...

// Getting the passed parameter from the menu id
if (strstr($this->menuid, 'show-post-')) {
    // Extract the id from the string
    // Query the database and execute additional logic
}