Development practices that you will commonly use in the Appzio platform.
As you have read in the Application Flow section, you can use buttons to tell the controller when you want to make a particular action. For example, you want to signal to the user that an element is active so you change it’s styles depending on the menuid.
if ($this->menuid == 'set-active') {
$buttonStyle = 'button-active'
} else {
$buttonStyle = 'button-default'
}
This will work fine but it depends on you re-rendering the whole view. In certain cases you might be okay with that, but often you will want such changes to take effect without refreshing the whole action. Let’s walk through the process of creating non-refresh radio buttons.
We will be using two different styles for active and inactive states, define them in your JSON styles file.
"button_default": {
"width": "34",
"height": "34",
"background-image": "status_inactive.png",
"background-size": "contain"
},
"button_active": {
"width": "34",
"height": "34",
"background-image": "status_active.png",
"background-size": "contain"
}
However, we won’t be using a button element or a radio button. We will be using a text element which will change it’s styles. The reason is that the text element is the only one which has the selected_state property. Whenever we click on it it goes into selected state and we can specify how it looks and behaves in it.
$selectedState = array(
'style' => 'button_active',
'variable_value' => 'male',
'allow_unselect' => 1
);
$this->getText('', array(
'style' => 'button_default',
'variable' => 'gender',
'selected_state' => $selectedState
));
There are a few things happening here. We are adding an empty text element but it is getting width and height from the styles or it will not appear on the screen. Then we are setting the element variable to gender so we can get it when submitting the form. Then we bind the selected state. It will have effect once the element is clicked – the active styles will take effect and the gender variable will get the value of male.
If you want to pre-select a component you can add the active property to it’s selected state and set it to 1. You can use multiple elements with the same variable to achieve radio buttons effect – only one will be able to hold selected_state at a time. This is useful when creating pickers or option controls. If you want to use this with checkbox-like functionality you should just use different variable names.
A frequently used component in mobile applications are popups. In Appzio popups are just actions that appear embedded inside a popup window. The pre-requisites are that the action must be active and you must know it’s id. The action id can be accessed using one of the helper methods:
$this->getActionidByPermaname('actionpermaname')
This method takes a single parameter – the action’s permaname. This string is defined in the admin panel but if you haven’t edited it it will be the action’s name all lowercase letters without spacing. Now that we have the action id we must use some sort of trigger to show the popup and call our action. This can be done using an onclick object with an open_popup parameter set to true.
$onclick = new StdClass();
$onclick->action = 'open-action';
$onclick->action_config = $this->getActionidByPermaname('actionpermaname');
$onclick->id = 'popup-settings';
$onclick->open_popup = 1;
We can also pass an id which can be accessed inside the class that handles the popup action. All in all, any action can be used as a popup. You can again use the regular methods, check for the menuid and execute logic.
Closing the popup is straightforward too. You can either click the empty area of the screen or you need to trigger a close-popup action somewhere in the popup action. You can do this by attaching an onclick object to a button.
$this->data->footer[] = $this->getText('Save', array(
'onclick' => $this->getOnclick('close-popup'),
'id' => 'id'
));