OneDealer XML Tab page is an extension of OneDealer XML Page and it can display data in several tabs as a form tab page or a grid list tab page.
The page type is declare in Page element in the attribute type as a OD Fully qualified assembly name.
OneDealer XML Tab Page Type
One.Core.UI.MVC.Pages.XmlPages.XmlOneDealerTabPage, One.Core.UI.MVC
Each Tab has its own datasource, which is declared in the xml definition.
Similar to OneDealer XML Grid List Page , the Tab Page has also Javascript Bundles.
OneDealer XML Tab Page - Example of Common Section
<?xml version="1.0" encoding="utf-8"?>
<Page type="One.Core.UI.MVC.Pages.XmlPages.XmlOneDealerTabPage, One.Core.UI.MVC">
<Common>
<Title>Test Tab Page</Title>
<JavascriptBundles>
<Item>~/Installations/IncadeaDemo/Scripts/IncadeaPageDataManager.js</Item>
</JavascriptBundles>
</Common>
</Page>
XmlOneDealerTabPage
OneDealer Tab Page is declared by using the xml element `XmlOneDealerTabPage` , which contains a array of tabs and each tab has its own definition.
XmlOneDealerTabPage
<?xml version="1.0" encoding="utf-8"?> <XmlOneDealerTabPage> <Tabs> .... </Tabs> </XmlOneDealerTabPage>
XmlOneDealerTab
XmlOneDealerTab is the xml element that behaves as a wrapper for the Tab xml element where the developer defines the content and behavior of the tab and it has the following properties
| Name | Description | Required | Value Type |
|---|---|---|---|
| Type | The Type of the tab (Form / Grid List Tab) | string - OD Fully qualified assembly name | |
| Title | The title for the tab | string | |
| TabIndex | A number that indicates the order that will be displayed | int | |
| XML definition of the content | XML |
| Tab Type | Description | OD Fully Qualified Assembly Name |
|---|---|---|
| Form | A tab that contains form data | One.Core.UI.MVC.Pages.OneDealer.TabPage.OneDealerFormTab, One.Core.UI.MVC |
| Grid List | A tab that contains grid list data | One.Core.UI.MVC.Pages.OneDealer.TabPage.GridListTab, One.Core.UI.MVC |
Grid List Tab
Please note that Grid List Tab has different OD Fully Qualified Assembly Name that Grid List Page
At the same level with Tab xml element the developer can add any desired Footer Page Actions.
Tabs
<?xml version="1.0" encoding="utf-8"?>
<XmlOneDealerTabPage>
<Tabs>
<XmlOneDealerTab>
<Tab type="One.Core.UI.MVC.Pages.OneDealer.TabPage.OneDealerFormTab, One.Core.UI.MVC">
<Title>Form Tab</Title>
<TabIndex>10</TabIndex>
....
</Tab>
<Actions>
<XmlFooterButtonAction>
<PageAction>
<Title>Save</Title>
<CssClass>icon icon-save</CssClass>
<IsAjax>true</IsAjax>
<Url>/PostSampleData</Url>
<AreaButtonPosition>Right</AreaButtonPosition>
<OnBeforeAjaxCallback>IncadeaPageDataManager.PostFormData(SampleDataTabForm)</OnBeforeAjaxCallback>
</PageAction>
</XmlFooterButtonAction>
</Actions>
</XmlOneDealerTab>
</Tabs>
</XmlOneDealerTabPage>
Tabs
<?xml version="1.0" encoding="utf-8"?>
<XmlOneDealerTabPage>
<Tabs>
<XmlOneDealerTab>
<Tab type="One.Core.UI.MVC.Pages.OneDealer.TabPage.OneDealerFormTab, One.Core.UI.MVC">
<Title>Form Tab</Title>
<TabIndex>10</TabIndex>
....
</Tab>
</XmlOneDealerTab>
<XmlOneDealerTab>
<Tab type="One.Core.UI.MVC.Pages.OneDealer.TabPage.GridListTab, One.Core.UI.MVC">
<Title>Grid List Tab</Title>
<TabIndex>20</TabIndex>
....
</Tab>
</XmlOneDealerTab>
</Tabs>
</XmlOneDealerTabPage>
Tab Content
As we mentioned above, each tab has its own content based on the declared Tab Type.
OneDealerFormTab
OD Fully Qualified Assembly Name: One.Core.UI.MVC.Pages.OneDealer.TabPage.OneDealerFormTab, One.Core.UI.MVC
The Form Tab type has a container for the form which is called FormContainer and it is similar to a Page type and has the following elements:
| Name | Description | Required | Value Type |
|---|---|---|---|
| Common | a common configuration section | XML Definition | |
| FormName | a name for the form (Used in client side events) | string | |
| Sections | Sections are considered as a form/control grouping based on the concept/sense. Each form can have one or more sections | XML Definition |
Tabs
<Tab type="One.Core.UI.MVC.Pages.OneDealer.TabPage.OneDealerFormTab, One.Core.UI.MVC">
<Title>Form Tab</Title>
<TabIndex>10</TabIndex>
<FormContainer>
<Common>
...
</Common>
<FormName>VehicleForm</FormName>
<Sections>
...
<Sections>
</FormContainer>
</Tab>
Common Section
In the Common Section we declare the data provider in order to display data, so similar to OneDealer XML Grid List Page, we have a PageDataProvider with an attribute type.
The type for the Form Tab is IncadeaModelDataPageBinderProvider
IncadeaModelDataPageBinderProvider
OneDealer.IncadeaDemo.BusinessLayer.Models.IncadeaModelDataPageBinderProvider, OneDealer.IncadeaDemo.BusinessLayer
This page data provider is specifically designed and implemented for the needs of Incadea and it is consisted from an IncadeaDataProvider and it is the same with OneDealer XML Grid List Page.
| Property | Description | Value Type |
|---|---|---|
| Url | the url to retrieve the data | string |
| RequestType | the request type GET/POST | string |
| Cache | An object related to cache configuration | element |
| PostParameters | If the request is a POST request declare here the required parameters | element |
Cache
| Property | Description | Value Type |
|---|---|---|
| Duration | The duration of the result object which is kept in the cache | int |
PostParameters
| Property | Description | Value Type |
|---|---|---|
| Key | The name of the parameter to sent | string |
| Value | The value of the parameter to sent | string |
Tabs
<Tab type="One.Core.UI.MVC.Pages.OneDealer.TabPage.OneDealerFormTab, One.Core.UI.MVC">
<Title>Form Tab</Title>
<TabIndex>10</TabIndex>
<FormContainer>
<Common>
<PageDataProvider type="OneDealer.IncadeaDemo.BusinessLayer.Models.IncadeaModelDataPageBinderProvider, OneDealer.IncadeaDemo.BusinessLayer">
<IncadeaDataProvider>
<Url>/incadeaapi/get_aftersales_data/{request[vehicleCode]}</Url>
<RequestType>GET</RequestType>
</IncadeaDataProvider>
</PageDataProvider>
</Common>
<FormName>VehicleForm</FormName>
<Sections>
...
<Sections>
</FormContainer>
</Tab>
Sections
Sections is an xml array of form section elements.
Each section contains a Title , a SectionID and a xml array of controls.
| Name | Description | Required | Value Type |
|---|---|---|---|
| Title | A text to display in the section | string | |
| SectionID | An ID for the section | string | |
| Controls | An array of form controls | XML Definition |
All the form controls have some common characteristics
Tabs
<Tab type="One.Core.UI.MVC.Pages.OneDealer.TabPage.OneDealerFormTab, One.Core.UI.MVC">
<Title>Form Tab</Title>
<TabIndex>10</TabIndex>
<FormContainer>
<Common>
<PageDataProvider type="OneDealer.IncadeaDemo.BusinessLayer.Models.IncadeaModelDataPageBinderProvider, OneDealer.IncadeaDemo.BusinessLayer">
<IncadeaDataProvider>
<Url>/incadeaapi/get_aftersales_data/{request[vehicleCode]}</Url>
<RequestType>GET</RequestType>
</IncadeaDataProvider>
</PageDataProvider>
</Common>
<FormName>VehicleForm</FormName>
<Sections>
<FormSection>
<Title>General data</Title>
<SectionID>GENERALDATA</SectionID>
<Controls>
...
</Controls>
</FormSection>
<Sections>
</FormContainer>
</Tab>
OneDealer Form Controls
You can read more regarding Form Controls in following link
Related
Grid List Tab
OD Fully Qualified Assembly Name: One.Core.UI.MVC.Pages.OneDealer.TabPage.GridListTab, One.Core.UI.MVC
The Grid List Tab has a container for the definition of the grid list which is called XmlGridListPage, it is also similar to a Page and has the following elements
| Name | Description | Required | Value Type |
|---|---|---|---|
| Common | a common configuration section | XML Definition | |
| Columns | a name for the form (Used in client side events) | XML Definition |
The Common and Columns sections are the same with OneDealer XML Grid List Page Common and Columns section..
OneDealer XML Tab Page complete Example
Tabs
<?xml version="1.0" encoding="utf-8"?>
<Page type="One.Core.UI.MVC.Pages.XmlPages.XmlOneDealerTabPage, One.Core.UI.MVC">
<Common>
<Title>Test Tab Page</Title>
<JavascriptBundles>
<Item>~/Installations/IncadeaDemo/Scripts/IncadeaPageDataManager.js</Item>
</JavascriptBundles>
</Common>
<OneDealerPage>
<CssClassIcon>fa-plus</CssClassIcon>
</OneDealerPage>
<PageActions>
<XmlPageAction>
<PageAction type="One.Core.UI.MVC.Pages.OneDealer.SubHeader.Actions.Extensions.OneDealerSubHeaderAction, One.Core.UI.MVC">
<CssClass>fa-plus</CssClass>
<CallBackAction/>
<IsAjax>false</IsAjax>
<Title>Test</Title>
<IncadeaDataProvider>
<!-- Page Actions that use IncadeaDataProvider, will respond with an object of type PageActionAjaxCollectionItemResult. Need to document this.-->
<Url>/incadeaapi/get_aftersales_data/{request[vehicleCode]}</Url>
<RequestType>GET</RequestType>
</IncadeaDataProvider>
</PageAction>
</XmlPageAction>
</PageActions>
<XmlOneDealerTabPage>
<Tabs>
<XmlOneDealerTab>
<Tab type="One.Core.UI.MVC.Pages.OneDealer.TabPage.OneDealerFormTab, One.Core.UI.MVC">
<Title>Form Tab</Title>
<TabIndex>10</TabIndex>
<FormContainer>
<Common>
<PageDataProvider type="OneDealer.IncadeaDemo.BusinessLayer.Models.IncadeaModelDataPageBinderProvider, OneDealer.IncadeaDemo.BusinessLayer">
<IncadeaDataProvider>
<!--<Url>/incadeaapi/get_aftersales_data/{request[vehicleCode]}</Url>-->
<Url>/ListDataItem?TestInt=1</Url>
<RequestType>GET</RequestType>
</IncadeaDataProvider>
</PageDataProvider>
</Common>
<FormName>VehicleForm</FormName>
<Sections>
<FormSection>
<Title>General data</Title>
<SectionID>GENERALDATA</SectionID>
<Controls>
<FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
<Title>String</Title>
<Field>TestString</Field>
</FormControl>
<FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
<Title>Bool</Title>
<Field>TestBool</Field>
</FormControl>
<FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
<Title>Char</Title>
<Field>TestChar</Field>
</FormControl>
<FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
<Title>Int</Title>
<Field>TestInt</Field>
</FormControl>
<FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
<Title>Long</Title>
<Field>TestLong</Field>
</FormControl>
<FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
<Title>Float</Title>
<Field>TestFloat</Field>
</FormControl>
<FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
<Title>Double</Title>
<Field>TestDouble</Field>
</FormControl>
<FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
<Title>DateTime</Title>
<Field>TestDateTime</Field>
</FormControl>
<FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
<Title>TimeSpan (Minutes)</Title>
<Field>TestTimeSpan.TotalMinutes</Field>
</FormControl>
</Controls>
</FormSection>
</Sections>
</FormContainer>
</Tab>
<Actions>
<XmlFooterButtonAction>
<PageAction>
<Title>Save</Title>
<CssClass>icon icon-save</CssClass>
<IsAjax>true</IsAjax>
<Url>/PostSampleData</Url>
<AreaButtonPosition>Right</AreaButtonPosition>
<OnBeforeAjaxCallback>IncadeaPageDataManager.PostFormData(SampleDataTabForm)</OnBeforeAjaxCallback>
</PageAction>
</XmlFooterButtonAction>
</Actions>
</XmlOneDealerTab>
<XmlOneDealerTab>
<Tab type="One.Core.UI.MVC.Pages.OneDealer.TabPage.GridListTab, One.Core.UI.MVC">
<Title>Grid List Tab</Title>
<TabIndex>20</TabIndex>
<XmlGridListPage>
<Common>
<PageDataProvider type="OneDealer.IncadeaDemo.BusinessLayer.Models.IncadeaGridListPageBinderProvider, OneDealer.IncadeaDemo.BusinessLayer">
<IncadeaDataProvider>
<!--<Url>/incadeaapi/get_aftersales_data/{request[vehicleCode]}</Url>-->
<Url>/ListData</Url>
<RequestType>GET</RequestType>
</IncadeaDataProvider>
</PageDataProvider>
</Common>
<Columns>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListLinkColumn, One.Core.UI.MVC">
<Order>1</Order>
<ColumnName>String</ColumnName>
<PropertyName>TestString</PropertyName>
<DefaultDisplay>true</DefaultDisplay>
<Url>/externalcontroller?pageId=TestIncadeaTabPage</Url>
<ParamName>TestInt</ParamName>
<PropertyKey>TestInt</PropertyKey>
</Column>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
<Order>2</Order>
<ColumnName>Bool</ColumnName>
<PropertyName>TestBool</PropertyName>
<DefaultDisplay>true</DefaultDisplay>
</Column>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListCheckboxColumn, One.Core.UI.MVC">
<Order>3</Order>
<ColumnName>Check</ColumnName>
<PropertyName>TestBool</PropertyName>
<DefaultDisplay>true</DefaultDisplay>
<Checked>TestBool</Checked>
<SpecificCheckedValue>True</SpecificCheckedValue>
</Column>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
<Order>4</Order>
<ColumnName>Char</ColumnName>
<PropertyName>TestChar</PropertyName>
<DefaultDisplay>true</DefaultDisplay>
</Column>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
<Order>5</Order>
<ColumnName>Int</ColumnName>
<PropertyName>TestInt</PropertyName>
<DefaultDisplay>true</DefaultDisplay>
</Column>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
<Order>6</Order>
<ColumnName>Long</ColumnName>
<PropertyName>TestLong</PropertyName>
<DefaultDisplay>true</DefaultDisplay>
</Column>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
<Order>7</Order>
<ColumnName>Float</ColumnName>
<PropertyName>TestFloat</PropertyName>
<DefaultDisplay>true</DefaultDisplay>
</Column>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
<Order>8</Order>
<ColumnName>Double</ColumnName>
<PropertyName>TestDouble</PropertyName>
<DefaultDisplay>true</DefaultDisplay>
</Column>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
<Order>9</Order>
<ColumnName>DateTime</ColumnName>
<PropertyName>TestDateTime</PropertyName>
<DefaultDisplay>true</DefaultDisplay>
<Format>yyyy-MM-dd HH:mm</Format>
</Column>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
<Order>10</Order>
<ColumnName>TimeSpan (Minutes)</ColumnName>
<PropertyName>TestTimeSpan.TotalMinutes</PropertyName>
<DefaultDisplay>true</DefaultDisplay>
</Column>
<Column type="One.Core.UI.MVC.Pages.GridList.GridListPageActionsColumn, One.Core.UI.MVC">
<DefaultDisplay>true</DefaultDisplay>
<Actions>
<XmlPageAction>
<PageAction>
<Url>/incadeaapi/get_aftersales_data/{request[vehicleCode]}</Url>
<Title>Download</Title>
<CssClass>fa-download</CssClass>
<OnBeforeAjaxCallback>IncadeaPageDataManager.PageActionToIncadeaDataProvider</OnBeforeAjaxCallback>
</PageAction>
<Parameters>
<XmlPageActionParameter>
<DataKey>Identifier</DataKey>
<MapperDataProvider>
<FromProperty>TestInt</FromProperty>
<ToProperty>DataValue</ToProperty>
</MapperDataProvider>
</XmlPageActionParameter>
<XmlPageActionParameter>
<DataKey>Text</DataKey>
<DataValue>Ok?!</DataValue>
</XmlPageActionParameter>
</Parameters>
</XmlPageAction>
<XmlPageAction>
<PageAction>
<ManagerPageCallback>
<Interface>OneDealer.IncadeaDemo.MVC.ActionControllers.IncadeaActionController, OneDealer.IncadeaDemo.MVC</Interface>
<Method>ExecutePageAction</Method>
</ManagerPageCallback>
<Title>Copy</Title>
<CssClass>fa-copy</CssClass>
<OnBeforeAjaxCallback>(function(pageAction) { return pageAction.CallBackActionParams; })</OnBeforeAjaxCallback>
</PageAction>
<Parameters>
<XmlPageActionParameter>
<DataKey>Identifier</DataKey>
<MapperDataProvider>
<FromProperty>TestInt</FromProperty>
<ToProperty>DataValue</ToProperty>
</MapperDataProvider>
</XmlPageActionParameter>
<XmlPageActionParameter>
<DataKey>Text</DataKey>
<DataValue>Ok?!</DataValue>
</XmlPageActionParameter>
</Parameters>
</XmlPageAction>
<XmlPageAction>
<PageAction>
<Url>/externalcontroller/RemoteRequestPost</Url>
<IsAjax>true</IsAjax>
<Title>Delete</Title>
<CssClass>fa-trash</CssClass>
<WarningMessage>Are you sure you want to delete this row?</WarningMessage>
<OnBeforeAjaxCallback>(function(pageAction) { return { param: pageAction.CallBackActionParams }; })</OnBeforeAjaxCallback>
</PageAction>
<Parameters>
<XmlPageActionParameter>
<DataKey>Identifier</DataKey>
<MapperDataProvider>
<FromProperty>TestInt</FromProperty>
<ToProperty>DataValue</ToProperty>
</MapperDataProvider>
</XmlPageActionParameter>
<XmlPageActionParameter>
<DataKey>Url</DataKey>
<DataValue>/incadeaapi/get_aftersales_data/{request[vehicleCode]}</DataValue>
</XmlPageActionParameter>
</Parameters>
</XmlPageAction>
</Actions>
</Column>
</Columns>
</XmlGridListPage>
</Tab>
</XmlOneDealerTab>
</Tabs>
</XmlOneDealerTabPage>
</Page>
Result
0 Comments