Page 1 of 1

Batch Actions Menu: colorize and format

Posted: 2018-11-23 10:01
by jsetzer
Today I've been working on batch actions menu. The menu will be created dynamically from database entries and therefore may become quite long. The more menuitem there are, the harder it will be to read and immediately understand what options they have. So I decided to add some visual hints directly in the menu and to share the code with you.

This is how it looks like right now:
chrome_2018-11-23_10-07-45.png
chrome_2018-11-23_10-07-45.png (25.58 KiB) Viewed 2604 times

And here is the code:
file: TABLENAME.php
function: TABLENAME_batch_actions(&$args) { ... }

According to the docs (https://bigprof.com/appgini/help/advanc ... ch-actions), you have to return an array of arrays like this:

Code: Select all

function TABLENAME_batch_actions(&$args){
  return array(
    array(
      'title' => 'Print mail labels',
      'function' => 'print_mail_labels',
      'icon' => 'th-list'
    )
  );
}
To colorize or format the menuitems, you can use HTML in the 'title' like this:

Code: Select all

        [ 'title' => 'You can use HTML here: <b>bold</b> / <i>italic</i> / <u>underlined</u>', 'icon'=>'cog', 'function' => 'test']
Bootstrap gives us a couple of classes for text-coloring.

  • text-primary (dark blue*)
  • text-info (blue)
  • text-success (green)
  • text-warning (yellow)
  • text-danger (red)
* Colors depend on your bootstrap-theme. So it may look different in your app:

You can use these classes in your title, for example:

Code: Select all

[ 'title' => 'This contains <b class="text-info">info</b> text', 'icon'=>'cog', 'function' => 'test'],
Some more examples:

Code: Select all

  return [
    [ 'title' => 'This contains formatted and multiline text:<br /><b>bold</b> / <i>italic</i> / <u>underlined</u>', 'icon'=>'cog', 'function' => 'test'],
    [ 'title' => 'This contains <b class="text-info">info</b> text', 'icon'=>'cog', 'function' => 'test'],
    [ 'title' => 'This contains <b class="text-primary">primary</b> text', 'icon'=>'cog', 'function' => 'test'],
    [ 'title' => 'This contains <b class="text-success">success</b> text', 'icon'=>'cog', 'function' => 'test'],
    [ 'title' => 'This contains <b class="text-warning">warning</b> text', 'icon'=>'cog', 'function' => 'test'],
    [ 'title' => 'This contains <b class="text-danger">danger</b> text', 'icon'=>'cog', 'function' => 'test'],
    [ 'title' => 'This contains <b class="text-muted">muted</b> text', 'icon'=>'cog', 'function' => 'test'],
    [ 'title' => 'You can even <b class="text-danger">colorize</b> the icon only', 'icon'=>'cog text-danger', 'function' => 'test']
];
And this is the result:
2018-11-23_10-29-07.png
2018-11-23_10-29-07.png (26.7 KiB) Viewed 2604 times


I almost forgot to say there is another post about batch actions menu here where peebee mentions the use of 'class': https://forums.appgini.com/phpbb/viewto ... atch#p7379

Hope you like it and use it!

Regards,
Jan

PS: These are screenshots of my current project in which I'm generating QRCode-Labels for printing (Avery Zweckform DIN A4 and Dymo endless labels) and make use of barcode-scanning, both right within AppGini. If you are interested, you may have a look here and scroll down to the very bottom of the page: https://www.bizzworxx.de/en/appgini-improvements/