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.
User Interface Configuration
Regarding the UI an OneDealer XML Page is categorized in four (4) sections
Header Section
Header section is the section of the page that are displayed the main info related to the content of the page, such as:
- Title
- Icon
Actions Section
In this section the developer can provide a way to the user to perform a user interaction with the system, for example to open a page and save new entity or to open a pop up dialog displaying data, etc.
There are two (2) types of actions, Page Actions and Sub Header Page Actions.
Page Actions are displayed directly in the page, are easy for the user to locate and access them and usually they are added for actions that need to performed frequently. We use them mainly for actions that are being performed often.
Sub Header Page Actions are being displayed as dropdown menu and each item is available for a user action. There are similar to Page Actions and the main difference is the way that are being displayed.
Content section
Content section is the section that the actual content is displayed and it can be a grid list or a tab page.
Footer Section
In this section , if it is required by the requirements, the developer can add buttons in order to perform an action related to the displayed content and usually are being used in Tab pages as a save button.
OneDealer XML Pages definition
Below we will try to show how each section and feature is supported in OneDealer's XML Pages
Page
Page has only one attribute, type, which can be the following two (2):
Page Type | Value |
---|---|
Grid List | One.Core.UI.MVC.Pages.XmlPages.XmlGridListBasePage, One.Core.UI.MVC |
Tab | One.Core.UI.MVC.Pages.XmlPages.XmlOneDealerTabPage, One.Core.UI.MVC |
<?xml version="1.0" encoding="utf-8" ?> <!-- type: Select Page Type Grid List or Tab Page Type --> <Page type="One.Core.UI.MVC.Pages.XmlPages.XmlGridListBasePage, One.Core.UI.MVC"> <!-- Common Section - Title / Header / Footer --> <Common></Common> <!-- OneDealer Page section - Icon --> <OneDealerPage></OneDealerPage> <!-- One of following Elements - Grid List or Tab Page --> <XmlGridListPage></XmlGridListPage> <!-- OR --> <XmlOneDealerTabPage></XmlOneDealerTabPage> </Page>
Common Section
In Common element we define the following
Element | Value Type |
---|---|
Title | String |
Header | Element |
Footer | Element |
Javascript Bundles | Element |
CssBundles | Element |
Javascript Bundles
There are some cases that the developer needs to add a custom client behavior ( e.g. a custom button action ) and this is supported by adding a javascript bundle.
Style Bundles
Some as Javascript Bundles , but for stylesheet.
<Common> <!--Base Page Title --> <Title>Test Title</Title> <!-- Header Element --> <Header> <!-- Enable/Disable the back action inside of OneDealer --> <AllowBack></AllowBack> <!-- Allow access to main menu --> <AllowMainMenu></AllowMainMenu> <!-- Show/Hide the search field in the header bar --> <IsVisibleEnterpriseSearch></IsVisibleEnterpriseSearch> </Header> <!--Page Footer --> <Footer> <!-- Show / Hide the footer bar --> <IsVisible>true</IsVisible> <!-- Footer Button --> <FooterButtons> <XmlPageAction> <PageAction type="One.Core.UI.MVC.Pages.PageAction, OneCore.UI"> <CssClass>fa-plus</CssClass> <CallBackAction></CallBackAction> <IsAjax>false</IsAjax> <Title>Test</Title> <AreaButtonPosition>Left</AreaButtonPosition> </PageAction> </XmlPageAction> </FooterButtons> </Footer> </Common>
OneDealer Page Section
In OneDealerPage section we define the following:
Element | Value Type |
---|---|
CssClassIcon | string |
PageActions | Element |
<OneDealerPage> <!-- Icon to be displayed in the header section--> <CssClassIcon>fa-text</CssClassIcon> <!-- Action Section on the top right of the page - Page Actions / Sub Header Page Actions --> <PageActions> <!-- Sub Header Page Action - As Dropdown menu --> <XmlSubHeaderPageAction> <!-- Dropdown Item --> <PageAction> <!-- Icon to display --> <CssClass>fa-plus</CssClass> <!-- URL to call --> <Url>/externalcontroller/AjaxPopup</Url> <!-- if it will open as pop up form --> <IsPopupPageAction>true</IsPopupPageAction> <!-- Title / text to display --> <Title>Create New</Title> </PageAction> <Parameters> <XmlPageActionParameter> <DataKey>pageId</DataKey> <DataValue>TestIncadeaFormPopup</DataValue> </XmlPageActionParameter> </Parameters> </XmlSubHeaderPageAction> <!-- Page Action --> <XmlPageAction> <PageAction> <!-- Icon to display --> <CssClass>fa-plus</CssClass> <!-- URL to call --> <Url>/externalcontroller/AjaxPopup</Url> <!-- if it will open as pop up form --> <IsPopupPageAction>true</IsPopupPageAction> <!-- Title / text to display --> <Title>Create New</Title> </PageAction> <Parameters> <XmlPageActionParameter> <DataKey>pageId</DataKey> <DataValue>TestIncadeaFormPopup</DataValue> </XmlPageActionParameter> </Parameters> </XmlPageAction> </PageActions> </OneDealerPage>
Page Actions
Page Actions are one of most common used elements in OneDealer, whether as user action from the Page Action Section, as a user action in specific row in the grid list or an action from a tab form page.
Page Action Response
Please note that every response from a Page Action, if the action is ajax request, should have the following two properties:
AjaxResultType
- Model
You can read more regarding this in the OneDealer XML Pages - Incadea Reference
Below we will try to describe the elements that are part of Page Actions and later we will describe in depth how to use them.
Element | Description | Required | Value Type |
---|---|---|---|
Title | The text to display | string | |
ResourceKey | The resource key for the translation | string | |
CssClass | The icon to display with the text | string | |
CssStyle | Custom Style if needed | string | |
IsVisible | If it will be displayed or not | bool | |
Url | The url to call | string | |
IsAjax | if it is an ajax call | bool | |
IsFullPageAjax | if it calls a full ajax page | bool | |
CallBackAction | a javascript function to call | string | |
CallBackActionParams | the parameters to pass during call | object | |
HeaderValues | If it is a Full Ajax Page, pass header parameters for ajax call | List<PageActionRequestHeaderRecord> | |
ManagerPageCallback | Declare an interface and method to be called on ther server | ManagerPageCallback | |
UIId | A Unique Id for the action | string | |
ParentId | For grouped menus with child items, declare the parentId | string | |
OnBeforeAjaxCallback | a javascript function to call before ajax call, such as get form data | string | |
IsPopupPageAction | If the result will be displayed in a pop up form | bool | |
IsGridList | If the result is a grid list | bool | |
IsDisabled | if the item is disabled | bool | |
WarningMessage | Warning message to display before the execution | string | |
WarningMessageResourceKey | The Key translation of the warning message | string | |
CloseAjaxPageCallback | a javascript function to call after the execution, such close dialog, or refresh page | string |
PageActionRequestHeaderRecord
Element | Description | value type |
---|---|---|
Key | The header item name | object |
Value | The header item value | object |
ManagerPageCallback
This element is declared when we need to perform an action to the server, for example if we want to save the data from a form.
Element | Description | Value Type |
---|---|---|
Interface | interface declared as full qualified assembly | string |
Method | Method name of the interface | string |
Page Action Examples
Grid List row Edit Page Action to another page
Grid List row Edit Page Action to another page<XmlGridListPage> <Columns> <!-- Columns --> <!-- Action Column --> <Column type="One.Core.UI.MVC.Pages.GridList.GridListPageActionsColumn, One.Core.UI.MVC"> <DefaultDisplay>true</DefaultDisplay> <Actions> <XmlPageAction> <PageAction> <Title>Edit</Title> <CssClass>fa-edit</CssClass> <IsFullPageAjax>true</IsFullPageAjax> <Url>/externalcontroller</Url> </PageAction> <!-- Parameters --> <Parameters> <!-- Parameter 1 --> <XmlPageActionParameter> <!-- In DataKey we declare the server parameter name --> <DataKey>pageId</DataKey> <!-- In DataValue we declare the server parameter value In this example the server parameter value is a static value of the page id we want to open --> <DataValue>TestIncadeaTabPage</DataValue> </XmlPageActionParameter> <!-- Parameter 2 --> <XmlPageActionParameter> <DataKey>TestInt</DataKey> <!-- Instead of DataValue, we can user MapperDataProvider, which takes the actual value from the declare property model --> <MapperDataProvider> <!-- Property Model name --> <FromProperty>TestInt</FromProperty> <!-- The actual value--> <ToProperty>DataValue</ToProperty> </MapperDataProvider> </XmlPageActionParameter> </Parameters> </XmlPageAction> </Actions> </Column> </Columns> </XmlGridListPage>
Grid List row Edit Page Action to pop up
<XmlGridListPage> <Columns> <!-- Columns --> <!-- Action Column --> <Column type="One.Core.UI.MVC.Pages.GridList.GridListPageActionsColumn, One.Core.UI.MVC"> <DefaultDisplay>true</DefaultDisplay> <Actions> <XmlPageAction> <PageAction> <Title>Edit Popup</Title> <CssClass>fa-edit</CssClass> <Url>/externalcontroller/AjaxPopup</Url> <IsPopupPageAction>true</IsPopupPageAction> </PageAction> <Parameters> <XmlPageActionParameter> <DataKey>pageId</DataKey> <DataValue>TestIncadeaFormPopup</DataValue> </XmlPageActionParameter> <XmlPageActionParameter> <DataKey>TestInt</DataKey> <MapperDataProvider> <FromProperty>TestInt</FromProperty> <ToProperty>DataValue</ToProperty> </MapperDataProvider> </XmlPageActionParameter> </Parameters> </XmlPageAction> </Actions> </Column> </Columns> </XmlGridListPage>
3. Page Action Section, go to new page
<OneDealerPage> <CssClassIcon>fa-text</CssClassIcon> <PageActions> <XmlPageAction> <PageAction> <Title>Create New</Title> <CssClass>fa-plus</CssClass> <IsFullPageAjax>true</IsFullPageAjax> <IsPopupPageAction>false</IsPopupPageAction> <Url>/externalcontroller</Url> </PageAction> <Parameters> <!-- Parameter 1 --> <XmlPageActionParameter> <!-- In DataKey we declare the server parameter name --> <DataKey>pageId</DataKey> <!-- In DataValue we declare the server parameter value In this example the server parameter value is a static value of the page id we want to open --> <DataValue>TestIncadeaTabPage</DataValue> </XmlPageActionParameter> <!-- Parameter 2 --> <XmlPageActionParameter> <DataKey>TestInt</DataKey> <!-- Instead of DataValue, we can user MapperDataProvider, which takes the actual value from the declare property model --> <MapperDataProvider> <!-- Property Model name --> <FromProperty>TestInt</FromProperty> <!-- The actual value--> <ToProperty>DataValue</ToProperty> </MapperDataProvider> </XmlPageActionParameter> </Parameters> </XmlPageAction> </PageActions> </OneDealerPage>
4. Sub Header Page Action, go to new page
<OneDealerPage> <!-- Icon to be displayed in the header section--> <CssClassIcon>fa-text</CssClassIcon> <!-- Action Section on the top right of the page - Page Actions / Sub Header Page Actions --> <PageActions> <!-- Sub Header Page Action - As Dropdown menu --> <XmlSubHeaderPageAction> <!-- Dropdown Item --> <PageAction> <!-- Icon to display --> <CssClass>fa-plus</CssClass> <!-- URL to call --> <Url>/externalcontroller</Url> <!-- if it will open as pop up form --> <IsPopupPageAction>false</IsPopupPageAction> <!-- Title / text to display --> <Title>Create New</Title> </PageAction> <Parameters> <!-- Parameter 1 --> <XmlPageActionParameter> <!-- In DataKey we declare the server parameter name --> <DataKey>pageId</DataKey> <!-- In DataValue we declare the server parameter value In this example the server parameter value is a static value of the page id we want to open --> <DataValue>TestIncadeaTabPage</DataValue> </XmlPageActionParameter> <!-- Parameter 2 --> <XmlPageActionParameter> <DataKey>TestInt</DataKey> <!-- Instead of DataValue, we can user MapperDataProvider, which takes the actual value from the declare property model --> <MapperDataProvider> <!-- Property Model name --> <FromProperty>TestInt</FromProperty> <!-- The actual value--> <ToProperty>DataValue</ToProperty> </MapperDataProvider> </XmlPageActionParameter> </Parameters> </XmlSubHeaderPageAction> </PageActions> </OneDealerPage>
0 Comments