In this section we are going to continue from the 3.3 OneDealer Pages Overview regarding OneDealer Tab Page.
Similar to OneDealer Grid List Pages, Tab Pages also inherit from OneDealerTabPage, OneDealerPage class and BaseWebPage .
BaseWebPage & OneDealerPage provide all the common features of the pages and almost all pages in OneDealer inherit from these classes.
OneDealerTabPage provides the tab functionallity.
A typical example of OneDealer Tab page is showed in the following picture
A Tab can be the following tab types
- Form Tab
- Grid List Tab
- Custom Tab
Tab Usage
By navigating through OneDealer's codebase you will notice that we implementing different the form tabs in to the grid list tab.
Usually we display form tabs by implementing them in xml files in contrast to the grid list tabs where we implementing them with code.
Both are valid implementations, it started that way and we keep it for consistency.
A tab page has actually to implement the following methods:
- OnInjectInitialize: Load any required data
- GetTabs : Add tab list
- InitializeTabModels : initialization of tab data / usually not used / preferred the OnInjectInitialize
A tab can be loaded during the tab selection, which then is performed an ajax request in order to retrieve data and to display them.
Common Features
In this section we won't describe common page features such as Page Actions, Sub Header Actions, Title, icons, etc.
They are implemented in the some way as in other page types.
Example of a tab page
namespace OneDealer.Inventory.MVC.Pages
{
public class VehicleCardPage : OneDealerTabPage
{
public override List<OneDealerTabPageContentItem> GetTabs()
{
var tabs = new List<OneDealerTabPageContentItem>();
var saveButton = PageFooterButton.CreateByButtonType(PageFooterButtonType.Save);
saveButton.OnBeforeAjaxCallback = "VehicleCardPageForm.GetFormData";
saveButton.ManagerPageCallback = new ManagerPageCallback()
{
Method = nameof(IVehiclePageActionController.SaveVehicleCardPageViewModel),// "SaveVehicleCardPageViewModel",
Interface = typeof(IVehiclePageActionController).AssemblyQualifiedName
};
saveButton.Title = Languages.CurrentResourceManager.GetStaticResourceKey("OD0000053", "Save");
//details tab
var details = GetFormDetailsTab();
details.FormContainer.AddStoreValue("Code", ViewModel.Code);
details.FooterButtons.Add(saveButton);
tabs.Add(details);
//features tab
AddFeaturesTab(tabs, saveButton);
if (IsForNew)
return tabs;
tabs.Add(GetOneDealerPhotoSelectorTab());
tabs.Add(GetRelationTab());
tabs.Add(GetCollaborationTab());
if (HasModelCode)
tabs.Add(GetModelDetailsTab());
tabs.Add(GetTabOwnershipHistoryListTab());
if (ViewModel.VehicleStatus == InventoryManager.GetMappedCarStatus(CarStatus.RentalVehicle))
tabs.Add(GetN4CarVehicleReservationsTab());
tabs.Add(GetVehicleOdometerTab());
tabs.Add(GetItemPriceListTab());
AddVehicleSpecificationsTab(tabs);
//TODO Check if i am reserved now
if (VehicleHasActiveReservation)
tabs.Add(GetVehicleReservationTab());
// MARKETPLACE
tabs.Add(GetMarketplaceClonesListTab());
tabs.Add(GetMarketplaceTwoSFlagsFormTab());
tabs.Add(GetMarketplacePublishesListTab());
tabs.Add(GetPricingCalculationTab());
//Users
tabs.Add(GetUsersTab());
return tabs;
}
}
}
Above you can see an example of the Inventory Details Page, which is a Tab page with several tabs:
- Detail tab
- Photos tab
- Related items tab
- Collaboration tab
- Vehicle Model details tab
- etc
Form Tab
A Form Tab is a tab that contains a form with controls. Usually used for displaying or editing data with a button for save or update.
Below you can see how a form tab is implemented
protected virtual OneDealerFormTab GetFormDetailsTab()
{
var formDetails = new OneDealerFormTab();
if (IsForNew)
{
formDetails = OneDealerFormTab.CreateByServerPath("~/Files/Forms/VehicleCardPage/NewVehicleDetails.xml", Languages.CurrentResourceManager.GetStaticResourceKey("OD0000264", "Details"), 1, "ViewModel");
}
else
{
formDetails = OneDealerFormTab.CreateByServerPath("~/Files/Forms/VehicleCardPage/Details.xml", Languages.CurrentResourceManager.GetStaticResourceKey("OD0000264", "Details"), 1, "ViewModel");
}
return formDetails;
}
Form Tab is actually the class OneDealerFormTab and as we have referenced we usually create form tabs by loading a XML file that contains the form fields.
You can read more XML forms in the OneDealer XML Tab page and OneDealer Form Controls
Form Personilization
Form Personalization is a feature of OneDealer where the user can personalise the view of the form such as field order and show/hide any non required, by the system, fields.
You can read more in Form Personalization page.
Grid List Tab
Grid List Tab is similar to Grid List Page where you implement the columns and the datasource. The difference is that the datasource is fetched by implementing the ItemsBinderProvider that expects and interface class and a method. An example of grid list tab can be found below
namespace OneDealer.Inventory.MVC.Pages.Marketplace
{
public class MarketplaceClonesTabPage : GridListTab
{
public MarketplaceClonesTabPage(string VehicleCode) {
Title = Languages.Translate("OD0007096", "TwoS Advertisements");
SecurityAccessKey = "12142";
JsName = "jsMarketplaceVehicleCloneList";
// Load Tab on Tab Click
OnTabChangeEvent = $"{JsName}.RefreshControlGridListData";
SearchModel = new InventoryVehicleGridListSearchModel()
{
InventoryVehicleCode = VehicleCode
};
ItemsBinderProvider = new GridListPageBinderProvider()
{
Method = nameof(IVehicleMarketplaceActionController.GetClonesByMarketplaceVehicleCode),
Manager = typeof(IVehicleMarketplaceActionController).AssemblyQualifiedName
};
Columns = new List<GridListBaseColumn>() {
new GridListTextColumn()
{
AllowReordering = true,
PropertyName = nameof(IDMS_MP_TEMPLATE.U_IDMS_MPDescription),
ColumnName = Languages.Translate("OD0006565", "Marketplace Name"),
DefaultDisplay = true,
IsSortable = true
},
new GridListTextColumn()
{
AllowReordering = true,
PropertyName = nameof(IDMS_MP_TEMPLATE.U_IDMS_Title),
ColumnName = Languages.Translate("OD0006591", "Name of Advertisement"),
DefaultDisplay = true,
IsSortable = true
},
new GridListLookupColumn()
{
AllowReordering = true,
PropertyName = nameof(IDMS_MP_TEMPLATE.U_IDMS_VehicleType),
ColumnName = Languages.Translate("BodyStyle", "Body Style"),
EntityName = nameof(XIS_BODYSTYLE),
PropertyKey = nameof(XIS_BODYSTYLE.Code),
PropertyValue = nameof(XIS_BODYSTYLE.Name),
DefaultDisplay = true,
IsSortable = true
},
new GridListEnumColumn()
{
ColumnName = Languages.Translate("OD0006569", "Publication Action"),
PropertyName = nameof(IDMS_MP_TEMPLATE.U_IDMS_PublicationActionStatus),
EnumFQAssemblyName = typeof(PublicationActionStatus).AssemblyQualifiedName,
DefaultDisplay = true,
AllowReordering = true,
IsSortable = true,
HelpTextViewPath = "~/Views/Partial/HelpText/PublicationActionStatus.cshtml"
},
new GridListEnumColumn()
{
ColumnName = Languages.Translate("OD0004952", "Publication Status"),
PropertyName = nameof(IDMS_MP_TEMPLATE.U_IDMS_PublicationStatus),
EnumFQAssemblyName = typeof(PublicationStatus).AssemblyQualifiedName,
DefaultDisplay = true,
AllowReordering = true,
IsSortable = true,
HelpTextViewPath = "~/Views/Partial/HelpText/PublicationStatus.cshtml"
},
new GridListCheckboxColumn()
{
AllowReordering = true,
PropertyName = nameof(IDMS_MP_TEMPLATE.U_IDMS_IsMain),
ColumnName = Languages.Translate("OD0000564", "Main"),
Checked = nameof(IDMS_MP_TEMPLATE.U_IDMS_IsMain),
DefaultDisplay = true,
IsSortable = true,
Disabled = true,
},
new GridListPageActionsColumn {
ColumnName = "",
PropertyName = "ActionGridColumn",
DefaultDisplay = true,
IsSortable = false,
Actions = new List<XmlPageAction>() {
new XmlPageAction()
{
PageAction = new PageAction()
{
Title = Languages.Translate("OD0006593", "Edit Advertisement"),
CssClass = "fa fa-pencil",
IsPopupPageAction = true,
IsFullPageAjax = false,
Url = UrlHelper.GenerateUrl(null, "MarketplaceCloneAjaxForm", "Marketplace", null, RouteTable.Routes, OneDealerContext.Request.RequestContext, false),
},
Parameters = new List<XmlPageActionParameter>() {
new XmlPageActionParameter() {
DataKey = "cloneCode",
MapperDataProvider = new MapperDataProvider {
FromProperty = nameof(IDMS_MP_TEMPLATE.Code),
ToProperty = nameof(XmlPageActionParameter.DataValue)
}
}
}
},
new XmlPageAction()
{
PageAction = new PageAction()
{
Title = Languages.Translate("OD0006594", "Delete Advertisement"),
CssClass = "icon icon-delete",
IsPopupPageAction = false,
IsFullPageAjax = false,
WarningMessage = Languages.Translate("OD0007097","Are you sure you want to delete this Advertisement and remove it from the marketplace?"),
CallBackAction = "VehicleCardPageHelper.DeleteClone"
},
Parameters = new List<XmlPageActionParameter>() {
new XmlPageActionParameter() {
DataKey = "cloneCode",
MapperDataProvider = new MapperDataProvider {
FromProperty = nameof(IDMS_MP_TEMPLATE.Code),
ToProperty = nameof(XmlPageActionParameter.DataValue)
}
}
}
},
new XmlPageAction()
{
PageAction = new PageAction()
{
Title = Languages.Translate("OD0006634", "Print Marketplace Info"),
CssClass = "fa-print",
IsPopupPageAction = false,
IsFullPageAjax = false,
CallBackAction = "VehiclePrintingHelper.GetMarketplacePrintFile"
},
Parameters = new List<XmlPageActionParameter>() {
new XmlPageActionParameter() {
DataKey = "cloneCode",
MapperDataProvider = new MapperDataProvider {
FromProperty = nameof(IDMS_MP_TEMPLATE.Code),
ToProperty = nameof(XmlPageActionParameter.DataValue)
}
},
new XmlPageActionParameter() {
DataKey = "documentType",
DataValue = FinancingTemplateType.VehicleMarketplaceDocTemplate.ToString()
},
new XmlPageActionParameter() {
DataKey = "extension",
DataValue = "pdf"
}
}
},
}
}
};
}
}
}
Custom Tab
You can implement a custom tab that means a tab that the operation is not supported by the existing Grid List and Form Tabs.
An example of this is that we wanted to displayed a publication history list of vehicles in marketplaces grouped by the publication instance. The problem is that we don't have any OneDealer control to display grouped data with sum aggregations and for that reason we created a custom tab that uses a kendo grid list that supports those features.
Custom Tab is the class OneDealerCustomTab which also inherits from OneDealerTabPageContentItem like Grid List and Form Tabs.
In Custom Tab we have to implement the source of the displayed content (razor view) and the datasource.
Related
Exercise
Create a OneDealerTab page.
0 Comments