Button does not appear in the UI

Hello. I am trying to add a button to every line item in Quotes that later will be used to compute some discounts. I am having trouble targeting the right layout. I tried this one: custom\modules\Products\clients\base\views\quote-data-group-list/qoute-date-group-list.php

The thing is, I must be doing something wrong, as the button does not appear in the UI. This is my file (the buttons part is the new thing):

$viewdefs['Products']['base']['view']['quote-data-group-list']=array(
'buttons'=>array(
array (
'type' => 'rowaction',
'event' => 'button:custom_pricing:click',
'name' => 'custom_pricing',
'label' => 'LBL_CUSTOM_PRICING_LABEL',
'css_class' => 'btn btn-primary'
)
),
'panels'=>array(
array(
'name'=>'products_quote_data_group_list',
'label'=>'LBL_PRODUCTS_QUOTE_DATA_LIST',
'fields'=>array(
array(
'name'=>'line_num',
'label'=>null,
'widthClass'=>'cell-xsmall',
'css_class'=>'line_num tcenter',
'type'=>'line-num',
'readonly'=>true,
),
array(
'name'=>'quantity',
'label'=>'LBL_QUANTITY',
'widthClass'=>'cell-small',
'css_class'=>'quantity',
'type'=>'float',
),
array(
'name'=>'product_template_name',
'label'=>'LBL_ITEM_NAME',
'widthClass'=>'cell-large',
'type'=>'quote-data-relate',
'required'=>true,
),
array(
'name'=>'mft_part_num',
'label'=>'LBL_MFT_PART_NUM',
'type'=>'base',
),
array(
'name'=>'discount_price',
'label'=>'LBL_DISCOUNT_PRICE',
'type'=>'currency',
'convertToBase'=>true,
'showTransactionalAmount'=>true,
'related_fields'=>array(
'discount_price',
'currency_id',
'base_rate',
),
),
array(
'name'=>'discount',
'type'=>'fieldset',
'css_class'=>'quote-discount-percent',
'label'=>'LBL_DISCOUNT_AMOUNT',
'fields'=>array(
array(
'name'=>'discount_amount',
'label'=>'LBL_DISCOUNT_AMOUNT',
'type'=>'discount',
'convertToBase'=>true,
'showTransactionalAmount'=>true,
),
array(
'type'=>'discount-select',
'name'=>'discount_select',
'no_default_action'=>true,
'buttons'=>array(
array(
'type'=>'rowaction',
'name'=>'select_discount_amount_button',
'label'=>'LBL_DISCOUNT_AMOUNT',
'event'=>'button:discount_select_change:click',
),
array(
'type'=>'rowaction',
'name'=>'select_discount_percent_button',
'label'=>'LBL_DISCOUNT_PERCENT',
'event'=>'button:discount_select_change:click',
),
),
),
),
),
array(
'name'=>'total_amount',
'label'=>'LBL_LINE_ITEM_TOTAL',
'type'=>'currency',
'widthClass'=>'cell-small',
'showTransactionalAmount'=>true,
'related_fields'=>array(
'total_amount',
'currency_id',
'base_rate',
),
),
array(
'name'=>'vat_rate_name',
'type'=>'quote-vat-relate',
'initial_filter'=>'active_taxrates',
'filter_populate'=>array(
'module'=>array('TaxRates'),
),
'related_fields'=>array(
'vat_rate',
'vat_rate_products'
),
),
array(
'name'=>'gross_price',
'widthClass'=>'cell-small',
),
array(
"name"=>'custom-fields-button',
'label'=>'LBL_CUSTOM_FIELDS_BUTTON',
'widthClass'=>'cell-xsmall',
'css_class'=>'tcenter',
),
),
),
),
);
  • Hey  the row-level actions are usually handled in flex-lists by a separate rightColumns array generated from "rowactions" in the php defs not "buttons" like you have. That said, the row.hbs file in Products/quote-data-group-list does not account for any row actions at all. So you'd need to update the JS controller to build rowactions and the HBS file to display rowactions for QLIs. You can check out flex-list.js addRowActions fn to see how the lists handle these rowaction buttons.

  • Oh, I do not really know the difference between rowaction and button. I just need a HTML button that triggers an even in the JS controller (Of course I will amend that, just first I need the button to show up)

  • What should I add to row.hbs to "properly" add a button. I can always just add <input type="button" name="whatever"> but.. what to type in the onclick event?

  • so in your /custom/modules/Products/clients/base/views/quote-data-group-list/row.hbs you'd have like 

    <td>
      <button data-event="custom-pricing">Custom Pricing</button>
    </td>

    then in /custom/modules/ProductBundles/clients/base/views/quote-data-group-list/quote-data-group-list.js you could do

    ({
        extendsFrom: 'ProductBundlesQuoteDataGroupListView',
    
        /**
         * @inheritdoc
         */
        initialize: function(options) {
            this._super('initialize', [options]);
    
            this.events = _.extend({}, this.events, {
                'click [data-event="custom-pricing"]': 'onCustomPricingBtnClicked'
            });
        },
    
        onCustomPricingBtnClicked: function(evt) {
            console.log('onCustomPricingBtnClicked', evt);
        }
    })

    now when they click the button that handler gets called and you can run whatever code you need to

    Hope that helps!