How to place the existing grid in the new tab by extending the existing ts and html files in Modern UI

Hi ​@rakeshe45 

The T290 training course on the modern UI details how you can do this.

You can find it here: T290

Hope this helps,

Aleks

Hi ​@aiwan 

Tanks for the response 

I have reviewed the certification and tried as below but still not able to display the tab for the “Category members” grid.

In classic UI for tab it is CurrentCategory view and for grid it is Members view.

import {
	PXView,
	PXFieldState,
	PXFieldOptions,
	createCollection,
	gridConfig,
	GridPreset
} from "client-controls";
import{IN204060, CurrentCategory, Members }from "src/screens/IN/IN204060/IN204060"


export interface  IN204060_Commerce extends IN204060{}
export class IN204060_Commerce{

}

export interface  CurrentCategory_Commerce extends CurrentCategory{}
export class CurrentCategory_Commerce{

}

export interface  Members_KensiumCommerce extends Members{}
export class Members_KensiumCommerce{

}

<template>
	<qp-template modify="splitPaneB-ItemCategory" view.bind="CurrentCategory">
        <qp-tabbar id="tabbar1" class="label-size-m">
            <qp-tab ref="tab=CategoryMembers" caption="Category Members">
                <qp-grid id="grid-ItemCategory" view.bind="Members" caption="Category Members" wg-container="Members_gridMembers"></qp-grid>
            </qp-tab>
        </qp-tabbar>
    </qp-template>
</template>

Additionally, we went ahead and on adding the tab in default IN204060.ts and IN204060.html files able to display properly in modern UI screen.

Thanks in advance

Hi ​@rakeshe45 

It doesn’t look like you have added any fields to the export classes.

Also, you need something similar to this:

export class IN204060_Commerce {
    YourViewName= createSignle(YourDacName);
}

if you have a grid in your tab, you need a @gridConfig something similar to below:

@gridConfig({
 preset: GridPreset.Details
})
export class YourDacName extends PXView {
 YourField: PXFieldState<PXFieldOptions.CommitChanges>; 
 YourField_description: PXFieldState;
}

then you should amend your html to resemble something like this:

<template>
<qp-tab 
    after="#tab-Commerce"
 id="tab-YourTabID" 
    caption="YourTabCaption">
    <qp-grid id="grid-YourGridID" view.bind="YourViewName">
    </qp-grid>
  </qp-tab>
</template>

Hi ​@aiwan 

Thank you for your response. I hope you are doing well.

As per your suggestion, I have made the necessary modifications to the TypeScript and HTML files and verified the changes. However, I am unable to display the tab, and the grid is no longer rendering.

Additionally, I would like to point out that the grid code is already present in the base TypeScript file. We are extending it in our TypeScript extension file to utilize the view in the HTML file.

Since, we don’t have the tabs in the default screen I have removed the “after” from “qp-tab” and tried.

Below is the code I have implemented. Could you please check this once.

import {
	PXView,
	PXFieldState,
	PXFieldOptions,
	createCollection,
	gridConfig,
	GridPreset,
    PXActionState,
    columnConfig,
    linkCommand
} from "client-controls";
import{IN204060, CurrentCategory, Members }from "src/screens/IN/IN204060/IN204060"


export interface  IN204060_Commerce extends IN204060{}
export class IN204060_Commerce{

}

export interface  CurrentCategory_Commerce extends CurrentCategory{}
export class CurrentCategory_Commerce{

}

export interface  Members_KensiumCommerce extends Members{}
@gridConfig({
    preset: GridPreset.Details
   })
export class Members_KensiumCommerce{
    Copy: PXActionState;
        Cut: PXActionState;
        Paste: PXActionState;
        AddItemsbyClass: PXActionState;

        @columnConfig({ allowCheckAll: true })
        CategorySelected: PXFieldState<PXFieldOptions.CommitChanges>;

        @linkCommand("viewDetails")
        InventoryID: PXFieldState<PXFieldOptions.CommitChanges>;

        InventoryItem__Descr: PXFieldState<PXFieldOptions.Disabled>;
        InventoryItem__ItemClassID: PXFieldState<PXFieldOptions.Disabled>;
        InventoryItem__ItemStatus: PXFieldState<PXFieldOptions.Disabled>;
}

<template>
	<qp-tab 
	 	id="tab-Categorymembers" 
		caption="Category Members">
		<qp-grid id="grid-CategoryMembersgrid" view.bind="Members"></qp-grid>
	</qp-tab>
</template>

Thanks in advance.

Hi ​@rakeshe45 

I had a similar issue in different context. Can you refresh the grid and let me know if that works for you?

Aleks

Hello ​@aiwan 

On refresh I am able to see the grid as below but not able to display the tab.

Thank you.

The source HTML does not contain the category members view as a tab not too sure how you would configure that into a tab:

<template>
	<qp-splitter id="splitter-ItemCategory" split="width" initial-split="20%" class="stretch">
		<split-pane id="splitPaneA-ItemCategory" class="v-stack">
			<qp-tree id="tree-ItemCategory" view.bind="Folders" caption="Categories"></qp-tree>
		</split-pane>
		<split-pane id="splitPaneB-ItemCategory" class="v-stack">
			<qp-template id="form-ItemCategory" name="1-1" class="label-size-sm equal-height" wg-container="CurrentCategory_form">
				<qp-fieldset id="fsColumnA-ItemCategory" slot="A" view.bind="CurrentCategory">
					<field Name="Description"></field>
				</qp-fieldset>
				<qp-fieldset id="fsColumnB-ItemCategory" slot="B" view.bind="ParentFolders">
					<field name="ParentID"></field>
				</qp-fieldset>
			</qp-template>
			<qp-grid id="grid-ItemCategory" view.bind="Members" caption="Category Members" wg-container="Members_gridMembers"></qp-grid>
		</split-pane>
	</qp-splitter>
</template>

Aleks