Tutorial: Action Bar on the Grid

 

In this example, let’s develop a report that allows us to perform a processing on a grid row by using the buttons of an action bar.

We can set different styles to the action bar:

Only Icons

Only Text

Icons and Text

Grouped Icons

Creating a New Grid

1. Create a new Grid application based on the table “products”.

Creating the Action bar

1. In the application menu, access the option Action bar.

2. Use the “Create new button” to add new action options in the grid lines.

3. We will create 2 Ajax buttons ( act_change_status and  act_delete_product ) as below.

act_change_status

Ajax event code:

if (sc_actionbar_clicked_state() == “product_available”) {

        

        $sql = “UPDATE products SET discontinued = 1 WHERE productid = ” . {productid};

        sc_actionbar_state(“act_change_status”, “product_discontinued”);

        

        {discontinued} = {lang_products_fild_discontinued};

        sc_change_css(‘color’, ‘#dc2626’, ‘discontinued’);

        

} elseif (sc_actionbar_clicked_state() == “product_discontinued”) {

        

        $sql = “UPDATE products SET discontinued = 0 WHERE productid = ” . {productid};

        sc_actionbar_state(“act_change_status”, “product_available”);

        

        {discontinued} = {lang_chart_available};

        sc_change_css(‘color’, ‘#65a30d’, ‘discontinued’);

}

sc_exec_sql($sql);

act_delete_product

Ajax event code:

$sql = “DELETE FROM products WHERE productid = ” . {productid};

sc_exec_sql($sql);

sc_ajax_refresh();

4. We also will create a Link button ( act_update_stock ) as below.

Linking to form_products_link_actionbar_btn_v99

5. Arranging the buttons.

6. If you wish to set a visual style to the action bar, you can click on the button “Edit bar visual”.

Formatting the Grid Layout

1. In the application menu, access the option Fields and click on the item New Field

2. We will create a Fields grouping: product to group the fields “productname” and “supplierid”.

3. In the menu “Fields positioning”, select to display the fields as shown in the image below.

4. Now access the event onRecord

7. And let’s use the following code.

sc_actionbar_state(“act_change_status”, “product_available”);

sc_change_css(‘sc_badge’, ‘purple’, ‘categoryid’);

sc_change_css(‘color’, ‘#65a30d’, ‘discontinued’);

if ({discontinued} == 1) {

        sc_change_css(‘color’, ‘#dc2626’, ‘discontinued’);

        sc_actionbar_state(“act_change_status”, “product_discontinued”);

}

8. Click on “Run application”.