How to create Action Buttons inside any Section $actionButton

To optimize the productivity and efficiency of KAS it is always good to add links towards useful sections without having to navigate to get to them. This is where action buttons become very useful.

Action buttons are very elegant and are displayed next to the section title like tabs. These links can have a icon at the end using font awesome.

 

To create these action buttons, simply create an array with the following name: $actionButton, although there are 3 other default variables than can be used.

By default there are 3 predefined action buttons that can be added to Articles, separated with colons, add the name of the page and the option type: 

 

$imageGallery = 'ARTICLE IMAGES:VIMPLD';
$videoGallery = 'ARTICLE VIDEOS:FZVTPLD';

 

There is also the preview URL that opens the webpage in a separate tag. separated with colons add the file name,language,ID column and title column. the last 2 are optional.

 

$previewURL = 'article:en:BLOGID:title_en'; 

or

$previewURL = 'services:en'; 

 

If we need to add more or other action buttons, we use then the  $actionButton array variable, where you can add the following array (Recommended):

 

$actionButton[0] = array(
 'link' => getPath('BLOGS','BLOG','ADD ARTICLE'),
 'text' => 'ADD NEW ARTICLE',
 'icon' => '<i class="fas fa-layer-plus"></i>'  //optional
);

 

or use the inline quick format where the value of each button is the URL, Button text and icon (font -awesome) all separated with colons ":" (an optional fifth segment supplies target; array syntax is recommended).

 

$elmid = 'add_article';
$actionButton[0] = getPath('BLOGS','BLOG','ADD ARTICLE').':ADD NEW ARTICLE:<i class="fas fa-layer-plus"></i>:$elmid';

 

Other options can be added such as elm ID (an id for each  action button) and target (for example _self or _blank)

 'id' => 'edit_article',  // optional
 'target' => '_blank' // optional; specify _self for the current context

 

If an ID is not provided, it will automatically assign and id as AB$i where $i is the element nth value:

id="AB0"
id="AB1"
//and so on

 

For Edit pages or pages not in the menu you need to create the proper link with optionTypes and next ID (array format, recommended):

 

$optionType = 'VFEDLPSIUW';
$nextid = $db_actions->result(0,'AID');

$actionButton = [
 [
 'link' => getPath('BLOGS','BLOG','EDIT ARTICLE',$optionType,$nextid),
 'text' => 'BACK TO EDIT ARTICLE',
 'icon' => '<i class="fas fa-layer-plus"></i>',  //optional
 'id' => 'edit_article',  // optional
 'class' => 'class_name(s)',  // optional
 'attributes' => 'style="some:style"',  // optional
 'target' => '_blank' // optional; specify _self for the current context
 ]
];

 

For action buttons to execute JS simply do not add a link and use the id to call the click trigger, you can use attributes to add data values.

 

<?php
$actionButton = [
 [
 'text' => 'USE CREDITS',
 'icon' => '<i class="fa-solid fa-badge-dollar"></i>',  //optional
 'id' => 'useCredits',  // optional
 'attributes' => 'data-credit="'.$credits->result(0,'CREDITS').'"',  // optional
 ]
];
?>

<script>
  $('#useCredits').click(function({
     let credits = $(this).data('credit');
     console.log(credits);
  });
</script>

 

Inline (quick format)

$actionButton[1] = getPath('BLOGS','BLOG','EDIT ARTICLE',$optionType,$nextid).":BACK TO EDIT ARTICLE:<i class="fas fa-layer-plus"></i>:".$elmid;

 

FYI, more parameters can be added to the link as a query string ?var=value

 

'link' => getPath('BLOGS','BLOG','ADD ARTICLE').'?'.$qstring.';

 

 

 

 

 

Current Core clarification

$actionButton = [[
    'link' => getPath('SECTION', 'SUBSECTION', 'ADD ITEM', 'FAH'),
    'text' => translate('ADD ITEM', 'AGREGAR ELEMENTO', 'AJOUTER UN ELEMENT'),
    'icon' => '<i class="fas fa-layer-plus"></i>',
    'target' => '_self'
]];

Example section, subsection and page names are placeholders. Use the names from your actual KAS section registration and the matching Core page filename.