Continuing my quest of making it easier to build UI in PHP, I’m excited to share the news about 1.5.0 version release.

Feature Stability

Some of you have raised concern about backward compatibility of the new features. It’s true that sometimes new features are released “under the hood” — they are undocumented for some time and may even be tweaked. To address this, I have added “Readiness Board”. Since the amount of feedback we get on new features (unless things crash!) is quite limited, we need some time to try them out and see if they can me further improved.

As PRs with new features are added, they end up in the first column, but gradually shift to the right. Once documented and stable, it would be quite unlikely that the UI Component or feature would be tweaked or changed.

Where is Localization?

I have mentioned that version 1.5 would feature localization. Well… As other features keep piling up and no work or contributions done towards 1.5, I decided to release without it. If you were looking forward to it, reach out to me on https://gitter.im/atk4/atk4 and we can work on it.

Special Thanks

I’d like to express a special thanks to those who contributed work to ATK and those who have supported it financially, especially www.saasty.io.

So what’s new in 1.5 (since 1.4) ?

Overall the focus was at improving existing components and making them more usable in application environments. The Popup component was added and used in conjunction with some other components.

Popup

Popup contents can be loaded dynamically, with a very short and simple PHP syntax:

$button = $app->add('Button');

$app->add('Popup', $button)->set(function($p) {

$p->add('LoremIpsum');

});

Try the demo: http://ui.agiletoolkit.org/demos/popup.php, or get the source.

In the source you can also find a neat implementation of Shopping Cart mechanic along with some login/logout logic.

Table Column Menus / Popups

Clicking in the table headers only did one thing so far — sort by the column. Now you can add more actions with the “Column Menus”.

The icon can be added to any column of the table and may contain either a menu or a Popup.

Demo: http://ui.agiletoolkit.org/demos/tablecolumnmenu.php

Table Column Filters

Adding multiple filters is possible

With the conveniently positioned popups comes the implementation of Column-filters. They are very intuitive and will automatically adjust for your specific data type. To add them:

$grid->addFilterColumn();

Items Per Page Selector

To end the debate how many items per page can be displayed, we have added ability to add a drop-down to tweak number of items displayed.

Select how many Items per page to display

Demo: http://ui.agiletoolkit.org/demos/grid.php

While you are there, check out the new “Search” implementation, which, just like the IPP selector, use JavaScript to reload content dynamically along with a clever progress indicator. When selector is not displayed — paginator will be still centered.

Multi-formatted columns

Continuing with the fixes to the column, the new formatter is added, which will format cell contents differently depending on the criteria you specify:

On the left — “money” formatter. On the right — new “multiformat” colums.

Demo: http://ui.agiletoolkit.org/demos/table2.php. And docs.

Admin Layout is now fluid

We have tweaked Admin Layout HTML to add “fluid” option. We liked it so much so that we made it a default. If you have a page with a lot of info, it will now dynamically expand to fit the full width of the screen:

Demo: http://ui.agiletoolkit.org/demos/crud2.php

Conditional Form

If you want to display fields conditionally on the form, you no longer need JS knowledge for that. New ATK UI Form feature lets you do it from PHP code:

$f_sub->setFieldsDisplayRules([

'email' => ['subscribe' => 'checked'],

'gender'=> ['subscribe' => 'checked'],

'm_gift'=> ['gender' => 'isExactly[Male]', 'subscribe' => 'checked'],

'f_gift'=> ['gender' => 'isExactly[Female]', 'subscribe' => 'checked'],

]);

Demo: http://ui.agiletoolkit.org/demos/jscondform.php

Custom Form Template

Forms deserve to be beautiful. Now you can make them beautiful with just a little knowledge of HTML.

Forms feature a sub-component called “Form Layout” — which are responsible for rendering labels and arranging fields. You can take a full control over that with your own custom template (written in PUG):

.ui.centered.grid

.six.wide.column

.ui.segment

form.ui.form

.two.fields

.field

| {$caption}

.field

| {$name}

.two.fields

.field

| {$is_required}

.field

| {$is_readonly}

.field

| {$default}

.three.fields

.eight.wide.field

| {$placeholder}

.five.wide.field

| {$class}

.three.wide.field

| {$icon}

(Note: ATK does not convert PUG to HTML for you though.)

Card

Simply dumps all the field values

When you need to output read-only data from your form and you don’t have time to create a custom View Template, this Card widget can display fields and its values with some formatting too (taken from Table column formatters).

I myself think this view is quite ugly and I’d much rather write a little bit of HTML code to have a lovely looking and compact Semantic UI Card. Perhaps in the future the Card class could look just as sexy:

Custom view

Get the bundle

Bundle on www.agiletoolkit.org (when you click Download button) has been updated as follows and is available FREE.

- Updating atk4/core (1.3.7 => 1.3.8)

- Updating atk4/dsql (1.2.1 => 1.2.4)

- Updating atk4/data (1.3.1 => 1.3.5)

- Updating atk4/ui (1.4.4 => 1.5.1)

If you already have application that uses https://github.com/atk4/ui, then a simple composer update would do.

HAPPY CODING and I hope we manage to make your UI sexier!!