We are working with Acumatica Modern UI and would like to ask for guidance on a UI behavior question.
We need to dynamically show or hide a tab based on the value of a specific field.
The field can have one of two values: “SHA” or “ASH”.
When the field value is “SHA”, the tab should be visible
When the field value is “ASH”, the tab should be hidden (and vice versa, if applicable)
Best answer by aleksandrsechin
You can try something like the following:
<qp-tab
id="customTab"
caption="Custom Tab"
if.bind="Document.Type.value === 'C'">
</qp-tab>or:
<qp-tab
id="customTab"
caption="Custom Tab"
if.bind="Document.ShowTab.value === true">
</qp-tab>
+16If everything on a tab is hidden, the tab will automatically hide itself. If the tab has only a few elements, this would probably be the easiest / least ongoing UI maintenance.
What does your tab look like?
+16You may find this article helpful. It’s worth noting Option 2 will work for both Classic and Modern UI. If you choose to go with Option 1 in Classic UI, then you’ll need to use an HTML condition like this:
<qp-tab id="tab-Budget" caption="Budget" load-on-demand.bind="false" visible.bind="CurrentDocument.BudgetValidation.value == true">(from \src\screens\RQ\RQ301000\RQ301000.html [~ line 83])
Here is my tab:
<qp-tab id="tab1" caption="Import Info" visible.bind="BZShipStationStore.IntegrationOption === SHA">
<qp-template id="tab1_3" name="1-1-1" qp-collapsible>
<div slot="A">
<qp-caption caption="Default Import Options"></qp-caption>
<qp-grid id="CstPXGrid146" slot="A" view.bind="BZShipStationStatuses"></qp-grid>
<qp-fieldset id="CurrentShipStationStore_CstPXLayoutRule17_fs0" wg-container="CurrentShipStationStore_CstFormView14" view.bind="CurrentShipStationStore" slot="A">
<field name="ShipStationShipment"></field>
<field name="GenerateShipment"></field>
<field name="ImportedOrderDestination"></field>
<field name="OrderType" config-allow-edit.bind="true"></field>
<field name="InvoiceType"></field>
<field name="ImportFreight"></field>
<field name="DefaultNonStockForFreight"></field>
<field name="BeginOrderDate_Date">
<qp-field control-state.bind="CurrentShipStationStore.BeginOrderDate_Time"></qp-field>
</field>
</qp-fieldset>
<qp-caption caption="Tax Options"></qp-caption>
<qp-fieldset id="CurrentShipStationStore_CstPXLayoutRule34_fs0" wg-container="CurrentShipStationStore_CstFormView31" view.bind="CurrentShipStationStore" slot="A">
<field name="ImportTax"></field>
<field name="TaxZoneID" config-allow-edit.bind="true"></field>
<field name="TaxID" config-allow-edit.bind="true"></field>
<field name="TaxableCategory" config-allow-edit.bind="true"></field>
</qp-fieldset>
</div>
<div slot="B">
<qp-caption caption="Customer Information"></qp-caption>
<qp-fieldset id="CurrentShipStationStore_CstPXLayoutRule49_fs1" wg-container="CurrentShipStationStore_CstFormView46" view.bind="CurrentShipStationStore" slot="B">
<field name="ImportNewCustomer"></field>
<field name="CustomerId" config-allow-edit.bind="true"></field>
<field name="OverrideBillToInfo"></field>
<field name="OverrideShipToInfo"></field>
<field name="CustomerClassID" config-allow-edit.bind="true"></field>
</qp-fieldset>
<qp-caption caption="Item Information"></qp-caption>
<qp-fieldset id="CurrentShipStationStore_CstPXLayoutRule58_fs1" wg-container="CurrentShipStationStore_CstFormView55" view.bind="CurrentShipStationStore" slot="B">
<field name="ImportNewItem"></field>
<field name="ImportItemType"></field>
<field name="ItemClassID" config-allow-edit.bind="true"></field>
<field name="ItemClassIDForNonStock" config-allow-edit.bind="true"></field>
<field name="DefaultSiteID"></field>
<field name="UOM"></field>
<field name="DefaultNonStockForMissingItems"></field>
<field name="PopulateInvDetails"></field>
<field name="ImportImages"></field>
<field name="UseNumSequenceforItemSKU"></field>
<field name="LastProductDate_Date">
<qp-field control-state.bind="CurrentShipStationStore.LastProductDate_Time"></qp-field>
</field>
</qp-fieldset>
</div>
<div slot="C">
<qp-caption caption="Cross-Reference Options"></qp-caption>
<qp-fieldset id="CurrentShipStationStore_CstPXLayoutRule41_fs2" wg-container="CurrentShipStationStore_CurrentShipStationStoreCrossRefOptionsID" view.bind="CurrentShipStationStore" slot="C">
<field name="UseWarehouseCrossRef"></field>
<field name="UseShipViaCrossRef"></field>
</qp-fieldset>
<qp-caption caption="Packaging"></qp-caption>
<qp-fieldset id="Features_CstPXLayoutRule128_fs0" wg-container="Features_CstFormView125" view.bind="Features" >
<field name="AutoPackaging"></field>
</qp-fieldset>
<qp-fieldset id="CurrentShipStationStore_CstFormView134_fs1" view.bind="CurrentShipStationStore">
<field name="DefaultBoxID"></field>
</qp-fieldset>
</div>
</qp-template>
</qp-tab>
+16That’s a lot of fields. I’d go with option 2.
Make sure to bind ‘load-on-demand’ to false so that the condition is re-evaluated on every callback, and make sure your ‘IntegrationOption’ field commits changes.
You can try something like the following:
<qp-tab
id="customTab"
caption="Custom Tab"
if.bind="Document.Type.value === 'C'">
</qp-tab>or:
<qp-tab
id="customTab"
caption="Custom Tab"
if.bind="Document.ShowTab.value === true">
</qp-tab>
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.