Layers
Quick overview of the Presentation/Business/Data Access layers.
Page Inheritance
User Interface (UI) in OneDealer is very specific for the following reasons:
- It is a clean to the eye design and it is very easy to the end user to get familiar and feel comfort through the daily usage
- High development productivity due to developer can focus on user experience and business logic.
If it is required, new UI pages can be created or existing pages can be extended.
The OneDealer UI is is constructed by using Page inheritance and below you can see a class diagram of it.
All OneDealer Pages have some common characteristics inherited from BaseWebPage, such as:
Then each Page has its own features and characteristics and two of the most common page types in OneDealer are the Grid List Page and Tab Page types.
Page Types
Below you can see some typical examples of OneDealer Pages
Grid List Page
Tab Page
Calendar Page
Sales Page
List of Page Types
Page Type | Description |
---|---|
Grid List | Displays data in a list view |
Tab | Displays data in tabs |
Calendar | Displays data in a calendar |
Custom | Any non supported scenario can developed |
IFrame | Displays other websites in a iframe |
Exception | Displays the exception messages |
Common Features
Feature | Sub Feature |
---|---|
Menu | |
Toolbar | |
Extended Menu | |
Back button | |
OD Logo | |
Refresh | |
Enterprise Search ( Lucene & Current Page search - if supported) | |
Shortcuts "New" | |
Notifications / Messages / Invitations | |
User Profile Menu | |
Header | |
Icon | |
Title | |
Sub Header | |
2nd Sub Header | |
3rd Sub Header | |
Page & Sub Header Actions | |
Content | |
Footer | Footer & Page Actions |
Side Page |
Page Layout and Sections
Ajax / Full Ajax Request
A page can be request as a postback action (page undergo a full Page
lifecycle) or as Ajax Request (is asynchronous and does not reload your page)
You can read more about ASP.NET MVC 5 APPLICATION LIFECYCLE below
In OneDealer we have two (2) types of Ajax Pages, the classic Ajax post and the Full Ajax post request.
This is implemented by sending a header value in the http request
- IsAjaxRequest = true for Ajax request
- IsFullAjaxPage = true in order to display a full window page through ajax request.
Form And Popup Form
OneDealer supports also Popup forms, which are form inside a popup window.
A Form can be the content of Page, Tab Page and Popup.
A more detailed explanation will be introduced later.
OneDealer XML Pages
OneDealer XML Pages is an easy way of creating pages in OneDealer. XML Pages supports the majority of the features of OneDealer Pages and speeds up the development process.
At the moment there are two (2) types of OneDealer XML Pages, Grid List and Tab pages and both types have some common features regarding the User Interface (UI) and Operation.
OneDealer XML Pages, as its name says, is implemented by using XML structure in order to create pages and forms.
Read more
With the help of XML Pages OneDealer has a lot of configuration pages/entities implement in that way and we called them as 'Setup Entities'.
A typical example are the 'Setup', an application configuration entity and the 'Resources', the translations of various texts and messages.
Page Actions
Page actions are a way for user to interact with OneDealer. We use them in pages (OneDealer Page, Grid List Page, Tab Page) in the Action Section as header actions or sub header actions.
You can reference to the image here to see the actions section.
Page actions are being used also in grid list row actions, in footer buttons and in popup form buttons.
Mainly we define the following properties in a page action:
- TItle
- Resource Key
- CssClass
- If we want to open a popup form and post data for saving
- Url
- IsPopupPageAction
- ManagerPageCallback
- if we want to open a full ajax page
- Url
- IsFullPageAjax
- CallBackAction
- If we want to open a popup form and post data for saving
XmlPageAction xmlPageActions = new XmlPageAction(); xmlPageActions.PageAction = new PageAction() { Title = "Edit", ResourceKey = "OD0000207", IsPopupPageAction = true, CssClass = "fa-pencil", Url = UrlHelper.GenerateUrl(null, "InventoryVehicleOwnershipAjaxForm", "Inventory", null, RouteTable.Routes, OneDealerContext.Request.RequestContext, false) }; var parameters = new List<XmlPageActionParameter>() { new XmlPageActionParameter() { DataKey = "VehicleCode", MapperDataProvider = new MapperDataProvider() { FromProperty = "Code", ToProperty = "DataValue" } }, new XmlPageActionParameter() { DataKey = "LineId", MapperDataProvider = new MapperDataProvider() { FromProperty = "LineId", ToProperty = "DataValue" } } }; xmlPageActions.Parameters = parameters;
We will describe later in detail the properties of page actions and how we use them.
Action Controllers
Action Controllers is the way to implement the connection between UI and Business Logic. As we described previously on Page Actions, if we want to open a popup form and post data for saving, we must fill the ManagerPageCallback.
The ManagerPageCallback is consisted from the followings properties:
- Interface - a fully qualified assembly name interface
- Method - the method to be called
Using reflection we inject the desired class in order to complete the process.
Below you can see an example of a button inside a popup form , where we declare which action controller should use in order to save the data.
saveButton.ManagerPageCallback = new ManagerPageCallback() { Method = nameof(IVehiclePageActionController.SaveVehicleCardPageViewModel),// "SaveVehicleCardPageViewModel", Interface = typeof(IVehiclePageActionController).AssemblyQualifiedName }; saveButton.Title = Languages.CurrentResourceManager.GetStaticResourceKey("OD0000053", "Save");
Injection
Action Controllers since they can be injected, they can also be overriden by other tenants. More info on action controllers here.
Page Action - Ajax Result Type
Page Actions that perform an ajax request, using Action Controllers, they are expecting as a result a PageActionAjaxResult, which is consisted from
AjaxResultType
: A string that is one of the ["Success"
,"Warning"
,"Error"
,"Redirect"
,"Reload"
,"Callback"
,"PopupMessage"
,"OpenServerPopup"
,"Collection"
]Model
: Depends on the value of the givenAjaxResultType
For example the above referenced interface and method, which is responsible for saving the vehicle's data, has a response as follows:
var listResult = new List<PageActionAjaxCollectionItemResult>(); if (changedModel) { listResult.Add(new PageActionAjaxCollectionItemResult(ClientPageAction.ShowLoader)); listResult.Add(new PageActionAjaxCollectionItemResult(PageActionAjaxResultType.Redirect, OneCoreUrlHelper.UrlAction("VehicleEdit", "Inventory", new { code = vehicle.Code }))); } listResult.Add(new PageActionAjaxCollectionItemResult(PageActionAjaxResultType.Success, "Saved")); return new PageActionAjaxResult(PageActionAjaxResultType.Collection, listResult);
The above code will do the following:
- will check if "changedModel" is true
- It will show the page loader
- It will redirect the user to the referenced url → "~/Inventory/VehicleEdit?code="
- if it is not true
- It will return a object that states that the process completed successfully with the message "Saved"
Collection
With the Collection as AjaxResultType we can execute a set of client operations, such as:
- Reload page
- Go back
- Hide Page Loader
- Close popup
- and some more
Setup Entities
Setup Entities are an easy way of creating CRUD pages for simple database entities, usually used in configuration or lookup tables.
There is a generic route rule in RouteConfig.cs
routes.MapRoute("SetupeEntities", "SetupEntities/List/{category}/{entityName}", new { controller = "SetupEntities", action = "List" });
Based on this rule the SetupeEntities controller will search the folder SetupEntities/List/ with subfolders the category and the entityname.
For example OneDealer's configuration setup is in the following url
~/SetupEntities/List/Administration/Setup
Add Comment