Revamping XiVO PBX UI

You might have figure since some time that “almost” all our UI components are now built based on Twitter Bootstrap. For some of them, like UC Assistant or CC Agent we even added sweet mix of flat / material design. This choice is partly guided by two reasons, readability and a rush of consistency for our solution. Sooner or later, it had to happen… apply it for historical XiVO administration front-end.
And, good news, this work is currently in progress for Aldebaran release, so far experimental in intermediate version.

What were our concerns ?

We are now used, with FE stack, to deal with SPA (single page application) and this mainly due to Angular framework. But this time, we can’t go from scratch, happily coding JS stuff, we already have a MPA ! 250 PHP pages with HTML, stylesheets and JS code embedded in <?php tags.

Big dilemma here… remained two options, continue with existing PHP code or replace little by little, repetitive patterns found in PHP pages by angular modules that can be unitary tested. Guess what ! We did not choose, we moved forward on both topics. A full migration to Angular in one step would have lead to a fail, at least for now.

Steps by steps…

We know from where we start with current look and feel

Current UI

At very beginning, first step was to remove completely existing stylesheets, bam! blank page, so that we were not anymore affected by apparence and forced to start over.

Second step, we updated PHP framework to generate bootstrap classes for forms, inputs, tables… and some adaptations to have a functional navbar. So far, so good, that was the quickest part (nevertheless not easiest one).

Third step, introducing Webpack, Less, ES6 and finally ng-app in head template to have modern tools to play with. From now, we lurk recurrent PHP patterns in all pages. Why so ? simply because we can replace tens of lines of code with business logic in a single tag that can be tested / styled in only one place, Priceless.

Let’s take a concrete example, toolbar existing in at least 50 pages

Current Toolbar

To display this search box and actions buttons here was the code found in every page using it:

<div class="fm-paragraph">
<?php
  echo	$form->text(array('name'	=> 'search',
          'id'		=> 'it-toolbar-search',
          'size'	=> 20,
          'paragraph'	=> false,
          'value'	=> $search,
          'default'	=> $this->bbf('toolbar_fm_search'))),

    $form->image(array('name'	=> 'submit',
           'id'		=> 'it-subsearch',
           'src'	=> $url->img('img/menu/top/toolbar/bt-search.gif'),
           'paragraph'	=> false,
           'alt'	=> $this->bbf('toolbar_fm_search')));
?>
</div>

<?php
	echo	$url->href_html($url->img_html('img/menu/top/toolbar/bt-add.gif',
					       $this->bbf('toolbar_opt_add'),
					       'id="toolbar-bt-add"
						border="0"'),
				'service/ipbx/pbx_settings/voicemail',
				'act=add',
				null,
				$this->bbf('toolbar_opt_add'));

if($this->get_var('act') === 'list'):
	echo	$url->img_html('img/menu/top/toolbar/bt-more.gif',
			       $this->bbf('toolbar_opt_advanced'),
			       'id="toolbar-bt-advanced"
				border="0"');
?>
<div class="sb-advanced-menu">
	<ul id="toolbar-advanced-menu">
		<li>
			<a href="#" id="toolbar-advanced-menu-enable"><?=$this->bbf('toolbar_adv_menu_enable');?></a>
		</li>
		<li>
			<a href="#" id="toolbar-advanced-menu-disable"><?=$this->bbf('toolbar_adv_menu_disable');?></a>
		</li>
		<li>
			<a href="#" id="toolbar-advanced-menu-select-all"><?=$this->bbf('toolbar_adv_menu_select-all');?></a>
		</li>
		<li>
			<a href="#" id="toolbar-advanced-menu-delete"><?=$this->bbf('toolbar_adv_menu_delete');?></a>
		</li>
	</ul>
</div>
<?php

endif;
?>

A bit verbose, right ? You’d rather be an expert of sed or have a good IDE to update implementation everywhere.

Move to an Angular directive was not so simple. Take the HTML code and put it in an HTML partial was not possible… translation is made server-side. To not mix concerns, and so avoid Angular with PHP code inside, we decided to implement a webservice inside XiVO to get translated bundle on demand depending the LANG used in the PHP page. Once done, we got a very flexible directive which in our replaced all above code with

<toolbar-search display-on="list"></toolbar-search>
<toolbar-buttons actions="['add']"
actions-adv="['toolbar-advanced-menu-enable','toolbar-advanced-menu-disable', 'toolbar-advanced-menu-select-all', 'toolbar-advanced-menu-delete']"
display-adv-on="list"></toolbar-buttons>

With following display

What’s next ?

So far the new web interface have following apparence, it may evolve during the intermediate versions. Do not hesitate to share what you think !

Anyway, we are working to move more and more PHP stuff to client side, in next version you’ll find a breadcrumb for quick navigation and I hope more and more cool stuff! Keep posted!

Laurent

Sources : https://gitlab.com/xivo.solutions/xivo-web-interface/tree/master/src/www/js/xivo/directives