Customization

Build your own portal

Build your own portal using Portal kit

  1. Create new project

    Create a new project that depends on PortalTemplate.

    Project structure

  2. Create new home page

    1. Create a new HTML Dialog for your home page and then use ui:composition to define template which you use inside. If you want to keep the look of default homepage, then choose DefaultHomePageTemplate.

      Tip

      Find more information about templates at Layout templates.

      Important

      Portal uses some template files in the folder "webContent/layouts" in Portal Template project. Do not create files with the same path and name in your project as they can override the Portal files.

    2. Create a new Start process and connect to User Dialog for your home page.

    3. Run your application, start your newly created process and see result.

      Tip

      Your new homepage is the default portal homepage. You can customize it. Reference at Portal home.

  3. Set category for tasks

    To categorize tasks, set values for Category field. Task category can be multi-level if it is separated by slash / signs, as below.

  4. How to use feature warning on closing browser/tab

    Sometimes when users are working on a task, if they close tab, browser or refresh page then they may lose their current work. It's a good idea to ask users to verify that they truly want to proceed with the action they just invoke. To use this feature, add WarnOnClosingBrowserTab component to the page you want to be affected.

    <ic:ch.ivy.addon.portalkit.feature.WarnOnClosingBrowserTab confirmMessage="You may lose your work in progress. Do you want to continue?" />

    Depending on browser, content of confirmMessage and names of buttons may vary.

    Tip

    Normally, when using this component, actions that user invoked outside Portal area like closing tab/browser, refreshing page, clicking on a link on bookmark bar of browser will cause browser to display a confirmation dialog. That might cause the feature work incorrectly.

    Actions that lead to navigation that user invoke inside Portal area like clicking on a link/button, submitting a form will not display any confirmation popup.

    In some cases, user might use javascript to navigate to another page, for example: set value for window.location.href or call location.reload().

    If that happens, add this to your javascript function: showConfirmDialogBeforeUnload = false;

PortalStyle customization (logos, colors, date patterns)

Change Portal's logos

You can change logo and login logo by modifying default logo in PortalStyle project.

  • Modify cms entry PortalStyle/images/logo/CorporateLogo.png to update homepage logo.

  • Modify cms entry PortalStyle/images/logo/loginLogo.png to update login logo.

  • Override the variables: @login-logo-height, @home-logo-height in customization.less to scale your logos.

Change Portal styles

Portal applies LESS framework to support you in customizing the styles of Portal. There are 4 files: theme.less (shouldn't be modified), variables.less (shouldn't be modified), font-faces.less , customization.less , they are placed at PortalStyle/webContent/resources/less .

  • font-faces.less : replace the default font url-s by your font url-s and add/change other font styles to customize the Portal's font styles.

  • customization.less : to change the styles of Portal deeply. E.g. Portal's component styles.

    Note

    Portal provides several variables ( @body-background-color , @menu-color , @sidebar-dimension-transition-duration , @sidebar-opacity-transition-duration , @process-chain-menu-color , etc.) to change Portal's style. To override the variables, you should put overriding code (e.g. @body-background-color: red ) at customization.less file.
    • @body-background-color : it is the background color of Portal.

    • @menu-color : it is the color of the application menu, the color of texts and icons on the menu will be calculated based on the brightness of the menu color.

    • @sidebar-opacity-transition-duration : it is the opacity transition duration of the text on application menu.

    • @process-chain-menu-color : it is the color of Process Chain component.

    • @action-button-color : it is the color of action button in Portal e.g: close, add, next ...

    • @action-button-border-radius : it sets shape of action button, it's rectangle when set @action-button-border-radius:0px;

    • @sidebar-dimension-transition-duration : it is the expanding/collapsing transition duration of the application menu.

Important

  • Do not change font-family property values.

  • Limitation: the task priority color customization hasn't changed the task priority colors in statistic.

There is additional button type allows developer to configure its color and shape. Use it when you need different button types in your own project. How to: use style class context-button for it. For example : <p:commandButton value="My button" styleClass="context-button" > There are 2 variables allow developers to change color and shape

  • @context-button-color : it is the color of context button

  • @context-button-border-radius : it sets shape of action button, it's rectangle when set @context-button-border-radius:0px;

After you finish your customization, compile these above less files to build the css file named theme.min.css and put it at PortalStyle/webContent/resources/css . You are highly recommended to run the mvn lesscss:compile maven command in PortalStyle to do it quickly.

Change date time pattern

You can change date pattern by modifying CMS in PortalStyle project: PortalStyle/patterns/datePattern and PortalStyle/patterns/dateTimePattern .

Login

Login page

To replace default login page, extends existing templates with ui:define name="login" to define your new login component like below

<ui:composition template="/layouts/BasicTemplate.xhtml">

<ui:define name="login">

<ic:internaltest.ui.YourOwnLoginComponent />

</ui:define>

</ui:composition>

Menu

Introduction

By default Portal main menu has 4 items: Processes, Tasks, Cases and Statistics. You can remove these items or add your own items.

Customization

Create a callable sub process in your project with the loadSubMenuItems() signature, make sure this signature is unique in your application and follow the hints.

Portal home

Before beginning

This guide assumes that you are already familiar with CSS to integrate your own widgets.

Introduction

The default home page of Portal has three built-in widgets in order: Process widget, Task widget, Statistic widget. If it does not fit your needs, you can replace it by your own one. We decided that based on screen size, widget may become hidden, not smaller.

Basic usage

Following these steps to have your own Portal Home:

  1. Create a new home page which uses the DefaultHomePageTemplate.xhtml template. By doing this, your new home page will inherit the widgets from the default home page and has a place holder for your own widgets.

    Your custom home page should look like below:

    <ui:composition template="/layouts/DefaultHomePageTemplate.xhtml" ... >

    <ui:define name="customWidget">

    ...

    </ui:define>

    </ui:composition>

  2. In case of single Portal: Create a new process start for the new home page. Now you will use this process start as the entry point of your portal instead of the default one. To let portal know about your new portal home, you have to go to the portal settings and set the portal home url to the new one. e.g: HOMEPAGE_URL=http://localhost:8081/ivy/pro/designer/CustomizePortalHome/157454FCA39C3844/start.ivp

    In case of multi Portal: refer to Setup multi portals to setup.

Note

Currently, responsive custom home page is not supported.

Advanced usage

The DefaultHomePageTemplate.xhtml template supports some customizations.

Display/hide the default widgets

The template has three parameters: displayProcessWidget, displayTaskWidget, displayStatisticWidget to display or hide the default widgets. Their default values are true, you can set them to boolean values (true/false) to display or hide them as you need.

<ui:composition template="/layouts/DefaultHomePageTemplate.xhtml" ... >

<ui:param name="displayTaskWidget" value="false" />

</ui:composition>

Tip

Task widget now is hidden.

Customize the default widget's sections

The template has the placeholders to redefine the default widgets' sections.

<ui:composition template="/layouts/DefaultHomePageTemplate.xhtml" ... >

<ui:define name="statisticWidget">

<div class="js-dashboard-main-content-3rd-col dashboard-main-content-3rd-col layout-col">

<h:panelGroup layout="block" styleClass="js-statistic-widget" id="statistic-widget-container">

<!-- KEEP THE STATISTIC WIDGET -->

<ic:ch.ivy.addon.portalkit.component.StatisticWidget id="statistics-widget" compactMode="true" tasks="#{tasks}" ... >

<!-- ADD THE WEATHER WIDGET BELOW STATISTIC WIDGET -->

<ic:my.namespace.WeatherWidget />

</h:panelGroup>

</div>

</ui:define>

</ui:composition>

Add your own widgets

The template has a placeholder to add your own widgets. Your own widgets' default positions are next to statistic widget, you can change them by setting the default widgets' positions.

<ui:composition template="/layouts/DefaultHomePageTemplate.xhtml" ... >

<ui:define name="customWidget">

<ic:my.namespace.ComponentName ... />

</ui:define>

</ui:composition>

Tip

This custom widget will show below the 3 default widget

Change the page's title

The default page title is Cockpit. Apply the following code to change it:

<ui:composition template="/layouts/DefaultHomePageTemplate.xhtml" ... >

<ui:define name="pageTitle">YOUR PAGE'S TITLE</ui:define>

</ui:composition>

Task widget

TaskWidget is a built-in component of Portal which contains the tasks users can interact with. In order to show needed task's information, Portal supports overriding concept for TaskWidget. Each TaskWidget contains 2 parts:

  1. UI: TaskHeader and TaskListHeader and TaskBody and TaskFilter

  2. Data query: display the tasks as you want

Important

  1. Task header customization does not support responsive design, smaller resolutions (iPad, etc.)

  2. Additional properties cannot be displayed right now as a column

  3. Task header's buttons cannot be modified (they stay where they are)

How to override task widget's UI

Refer to PortalExamples project for examples

  1. Introduce an Axon.ivy project which has PortalTemplate as a required library.

  2. To customize task widget, you must customize Portal Home first. Refer to Customize Portal home to set new home page.

  3. Copy the PortalStart process from PortalTemplate to your project. Point PortalHome element to your custom home page in previous step. This process is new home page and administrator should register this link by Portal's Admin Settings.

  4. Override Task widget in: TaskList page, Task Search result, Relate tasks of a case, History tasks of a case.

    • Introduce a new HTMLDialog which uses template /layouts/PortalTasksTemplate.xhtml (refer to Responsiveness to override responsiveness). You can take a look at PortalTasks.xhtml to see how to customize it.

      Tip

      Highly recommend to copy the PortalTasks HTMLDialog in PortalTemplate and change the copied one's view.

    • Use Axon.ivy Override to override the OpenPortalTasks callable. The original implementation of this callable is calling PortalTasks, change it to call the customized Page introduced in the step above. The signature of this callable is useView(TaskView) and customized page must receive this TaskView instance, put in the dialog's Data with the exact name taskView.

  5. After previous steps, you can override TaskHeader and TaskListHeader and TaskBody and TaskFilter

Task header

Refer to the taskListHeader and taskHeader sections in PortalTasks.xhtml of PortalTemplate. In case your task widget has new columns, you should override TaskLazyDataModel to make the sort function of these columns work:

  • Introduce a java class extends TaskLazyDataModel

  • Override the extendSort method, the extendSortTasksInNotDisplayedTaskMap method and extend the sort function for the added columns (see the methods' Javadoc comments)

  • Default taskList supports user to config display/hide column

    • In case you has new columns, override method getDefaultColumns of the extended class from TaskLazyDataModel to display checkboxes in Config columns panel and display/hide sortFields (see the methods' Javadoc comments)

    • To add cms for checkboxes's label, add new entries to folder /ch.ivy.addon.portalkit.ui.jsf/taskList/defaultColumns/ in PortalStyle or override method getColumnLabel(see the methods' Javadoc comments)

    • In taskListHeader section, use TaskColumnHeader component

    • In taskHeader section, use TaskCustomField component for each additional columns. This component will handle display/hide new columns on task list.

      Currently, TaskCustomField only supports text field. If you want to create your own component, remember to add rendered="#{taskView.dataModel.isSelectedColumn('YOUR_CUSTOM_COLUMN')}"

      For example: Show custom field customer name which stored in task.customVarCharField5

      <ic:ch.ivy.addon.portalkit.component.task.column.TaskCustomField id="customer-name-component" componentId="customer-name" column="customVarCharField5" dataModel="#{taskView.dataModel}" labelValue="#{task.customVarCharField5}" />

  • Use Axon.ivy Override to override the InitializeTaskDataModel callable and initialize data model by your customized one.

  • In your customized portal tasks HTMLDialog, the customized data model should be passed as a parameter to components (refer to PortalTasks.xhtml).

Task body

Refer to the taskBody section in PortalTasks.xhtml of PortalTemplate.

If you need to apply the responsiveness behavior of Portal for task details, there are 2 components which can be used: ResponsivenessHandleContainer and ResponsivenessHandleButton:

  • ResponsivenessHandleContainer: a container contains ResponsivenessHandleButton and your javascript which contains the onstart and oncomplete function of ResponsivenessHandleButton.

  • ResponsivenessHandleButton: contains the params which handle responsiveness:

    • icon: the icon of button

    • displayedSelectors: css selectors of the components which need to be displayed.

    • hiddenSelectorsInLargeScreen: css selectors of the components which need to be hidden in large screen (width: 1920).

    • hiddenSelectorsInMediumScreen: css selectors of the components which need to be hidden in medium screen (width: 1366).

    • hiddenSelectorsInSmallScreen: css selectors of the components which need to be hidden in small screen (width: 1024).

    • fadeTime: the fade in/out time.

    • onstart: client side callback to execute before responsiveness execution.

    • oncomplete: client side callback to execute after responsiveness execution.

For example:

<ui:composition template="/layouts/PortalTasksTemplate.xhtml">

<ui:param name="useOverrideBody" value="true" />

<ui:define name="taskBody">

Customized content

<ic:ch.ivy.addon.portalkit.component.ResponsivenessHandleContainer styleClass="hidden-lg">

<ic:ch.ivy.addon.portalkit.component.ResponsivenessHandleButton icon="fa fa-file js-note-column-responsive-button" displayedSelectors="['#task-note']" hiddenSelectorsInMediumScreen="['.task-details .replaced']" hiddenSelectorsInSmallScreen="['.task-details .replaced']" />

<h:outputScript library="js" name="task-detail-default-responsiveness.js" />

</ic:ch.ivy.addon.portalkit.component.ResponsivenessHandleContainer>

</ui:define>

</ui:composition>

Task filter

  • Refer to the taskFilter section in PortalTasks.xhtml of PortalTemplate.

  • In order to introduce new filter, create a new java class extends TaskFilter and override its methods (see javadoc comments)

  • Introduce a java class extends TaskFilterContainer. This filter container contains your filters, you can reuse default filters, refer to DefaultTaskFilterContainer.java

    Tip

    StateFilter is added as default to container. If you don't need it, use this code in constructor: filters.remove(stateFilter);

  • Introduce a java class extends TaskLazyDataModel. Override the initFilterContainer method and initialize filter container (see javadoc comments)

  • Use Axon.ivy Override to override the InitializeTaskDataModel callable and initialize data model by your customized one.

  • In your customized portal tasks HTMLDialog, the customized data model and filter container should be passed as parameters to components (refer to PortalTasks.xhtml).

  • Advanced usage: Portal supports storing/restoring filters. Your filter class (extends TaskFilter) is stored in business data. Properties stored user input values should be persisted, properties controlled logic should not be persisted to reduce persisted data size in business data. Use annotation @JsonIgnore to exclude properties. By default, Portal takes care storing/restoring filters. If you want to customize storing/restoring filter data, do it in your data model class (extends TaskLazyDataModel class).

    By default, filters are stored/restored in process model level. You can change this by setting the ui:param filterGroupId in PortalTasks.xhtml to a new Long value.

    Tip

    If you have multiple case lists in your project, you may want to set filterGroupId to an unique identifier for each of your PortalTasks.xhtml across your projects

How to override task widget's data query

  • Override the BuildTaskJsonQuery callable process of PortalKit and build your own query to effect the data of task widget, task categories and statistic widget.
  • If you want to apply a query for only Home page task list, not for Full mode task list, use attribute isQueryForHomePage in BuildTaskJsonQuery callable process to specify the query for Home page task list, e.g.

    if (in.isQueryForHomePage) { // in home page
    	in.jsonQuery = TaskQuery.create().where().activatorUserId().isNotNull().asJson();
    }
    

  • Apply the following steps in case you would like to provide data for task list after navigating to task list from your page, e.g. clicking on a bar chart then opening the tasks of that bar:
    • Use the OpenPortalTasks callable process with the TaskView parameter. It is used to define which information are displayed in TaskWidget.

    • Refer to TaskView, TaskSearchCriteria, TaskQueryCriteria to build your TaskView

    TaskLazyDataModel dataModel = new TaskLazyDataModel();
    dataModel.getQueryCriteria().setTaskQuery(YOUR_TASK_QUERY); // Set your TaskQuery
    dataModel.getSearchCriteria().setInvolvedUsername(true); // Use this code line if you would like to display the tasks for all users
    out.taskView = TaskView.create().dataModel(dataModel).showHeaderToolbar(false).createNewTaskView();
    

Custom task delegate

Portal allows to customize the list of users and roles that a task can be delegated to. This can be done following these steps:

  1. Introduce a Axon.ivy project which has PortalTemplate as a required library and its own PortalStart process. Refer to step 1, 2, 3, 4 in override task widget's UI guide.

  2. In your project, override the callable subprocess CalculateTaskDelegate

  3. The callable subprocess data contains the current user in.currentUser and the current task to be delegated in.task. The lists in.users and in.roles contain all possible users and roles that the task can be delegated to. Modify those two to have your own delegate list.

Case widget

CaseWidget is a built-in component of Portal which contains the cases which users can interact with. In order to show needed case's information, Portal supports overriding concept for CaseWidget. Each CaseWidget contains 2 parts:

  1. UI : CaseListHeader, CaseHeader, CaseBody and CaseFilter

  2. Data query : display the cases as you want by modifying data query

Important

  1. Case header customization does not support responsive design, smaller resolutions (iPad, etc.)

  2. Additional properties cannot be displayed right now as a column

  3. Case header's buttons cannot be modified (they stay where they are)

How to override case widget's UI

Refer to PortalExamples project for examples

  1. Introduce an Axon.ivy project which has PortalTemplate as a required library.

  2. To customize case widget, you must customize Portal Home first. Refer to Customize Portal home to set new home page.

  3. Copy the PortalStart process from PortalTemplate to your project. Point PortalHome element to your custom home page in previous step. This process is new home page and administrator should register this link by Portal's Admin Settings.

  4. Override Case widget in: CaseList page, Case Search result.

    • Introduce a new HTMLDialog which uses template /layouts/PortalCasesTemplate.xhtml (refer to Responsiveness to override responsiveness). You can take a look at PortalCases.xhtml to see how to customize it.

      Tip

      Highly recommend to copy the PortalCases HTMLDialog in PortalTemplate and change the copied one's view.

    • Use Axon.ivy Override to override the OpenPortalCases callable. The original implementation of this callable is calling PortalCases, change it to call the customized Page introduced in the step above. The signature of this callable is useView(CaseView) and customized page must receive this CaseView instance, put in the dialog's Data with the exact name caseView.

  5. After previous steps, you can override CaseHeader and CaseListHeader and CaseBody and CaseFilter

Case List Header and Case Header

Refer to the caseListHeader and caseHeader sections in PortalCases.xhtml of PortalTemplate. In case your case widget has new columns, you should override CaseLazyDataModel to make the sort function of these columns work:

  • Introduce a java class extends CaseLazyDataModel

  • Override the extendSort method, the extendSortCasesInNotDisplayedCaseMap method and extend the sort function for the added columns (see the methods' Javadoc comments)

  • Default caseList supports user to config display/hide column

    • In case you have new columns, override method getDefaultColumns of the extended class from CaseLazyDataModel to display checkboxes in Config columns panel and display/hide sortFields (see the methods' Javadoc comments)

    • To add cms for checkboxes's label, add new entries to folder /ch.ivy.addon.portalkit.ui.jsf/caseList/defaultColumns/ in PortalStyle or override method getColumnLabel(see the methods' Javadoc comments)

    • In caseListHeader section, use CaseColumnHeader component

    • In caseHeader section, use CaseCustomField component for each additional column. This component will handle display/hide new columns on case list.

      Currently, CaseCustomField only supports text field. If you want to create your own component, remember to add rendered="#{caseView.dataModel.isSelectedColumn('YOUR_CUSTOM_COLUMN')}"

      For example: Show custom field customer name which stored in case.customVarCharField1

      <ic:ch.ivy.addon.portalkit.component.cases.column.CaseCustomField id="case-customer-name-component" panelGroupId="customVarCharField1-column-case-header-panel" componentId="customVarCharField1-column-case-header-text" column="customVarCharField1" dataModel="#{caseView.dataModel}" labelValue="#{case.customVarCharField1}" />

  • Use Axon.ivy Override to override the InitializeCaseDataModel callable and initialize data model by your customized one.

  • In your customized portal cases HTMLDialog, the customized data model should be passed as a parameter to components (refer to PortalCases.xhtml).

Case body

Refer to the caseBody section in PortalCases.xhtml of PortalTemplate.

If you need to apply the responsiveness behavior of Portal for case details, there are 2 components which can be used: ResponsivenessHandleContainer and ResponsivenessHandleButton:

  • ResponsivenessHandleContainer: a container contains ResponsivenessHandleButton and your javascript which contains the onstart and oncomplete function of ResponsivenessHandleButton.

  • ResponsivenessHandleButton: contains the params which handle responsiveness:

    • icon: the icon of button

    • displayedSelectors: css selectors of the components which need to be displayed.

    • hiddenSelectorsInLargeScreen: css selectors of the components which need to be hidden in large screen (width: 1920px).

    • hiddenSelectorsInMediumScreen: css selectors of the components which need to be displayed in medium screen (width: 1366px).

    • hiddenSelectorsInSmallScreen: css selectors of the components which need to be displayed in small screen (width: 1024px).

    • fadeTime: the fade in/out time. (metric: millisecond)

    • onstart: client side callback to execute before responsiveness execution.

    • oncomplete: client side callback to execute after responsiveness execution.

Case filter

  • Refer to the caseFilter section in PortalCases.xhtml of PortalTemplate.

  • In order to introduce new filter, create a new java class extends CaseFilter and override its methods (see javadoc comments)

  • Introduce a java class extends CaseFilterContainer. This filter container contains your filters, you can reuse default filters, refer to DefaultCaseFilterContainer.java

    Tip

    StateFilter is added as default to container. If you don't need it, use this code in constructor: filters.remove(stateFilter);

  • Introduce a java class extends CaseLazyDataModel. Override the initFilterContainer method and initialize filter container (see javadoc comments)

  • Use Axon.ivy Override to override the InitializeCaseDataModel callable and initialize data model by your customized one.

  • In your customized portal cases HTMLDialog, the customized data model and filter container should be passed as parameters to components (refer to PortalCases.xhtml).

  • Portal supports storing/restoring filters. Your filter class (extends CaseFilter) is stored in business data. Properties stored user input values should be persisted, properties controlled logic should not be persisted to reduce persisted data size in business data. Use annotation @JsonIgnore to exclude properties. By default, Portal takes care storing/restoring filters. If you want to customize storing/restoring filter data, do it in your data model class (extends CaseLazyDataModel class).

  • By default, filters are stored/restored in process model level. You can change this by setting the ui:param filterGroupId in PortalCases.xhtml to a new Long value.

    Tip

    If you have multiple case lists in your project, you may want to set filterGroupId to an unique identifier for each of your PortalCases.xhtml across your projects

How to override case widget's data query

Override the BuildCaseJsonQuery callable process of PortalKit and build your own query to effect the data of case widget.

Apply the following steps in case you would like to provide data for case list after navigating to case list from your page:

  • Use the OpenPortalCases callable process with the CaseView parameter. It is used to define which information are displayed in CaseWidget.

  • Refer to CaseView, CaseSearchCriteria, CaseQueryCriteria to build your CaseView

CaseLazyDataModel dataModel = new CaseLazyDataModel();
dataModel.getQueryCriteria().setCaseQuery(YOUR_CASE_QUERY); // Set your CaseQuery
dataModel.getSearchCriteria().setInvolvedUsername(true); // Use this code line if you would like to display the cases for all users
out.caseView = CaseView.create().dataModel(dataModel).withTitle("My Cases").buildNewView();
			

Default user process

Introduction

In Portal homepage, the Process widget displays default processes, you can customize them so that project important starts are displayed.

Customization

Create an override which overrides sub process createDefaultUserProcess() in Portal Kit. This sub process return a list of user processes. Follow instruction to create default processes.

Tip

We provide the method to generate link from UserFriendlyRequestPath in ProcessStartCollector class: findStartableLinkByUserFriendlyRequestPath(String requestPath). This method will return startable link if user has permission to start the process, otherwise return emtpy string.

Default chart

Introduction

In Portal homepage, by default there is no chart. But you can create your default chart.

Customization

Create an override which overrides sub process DefaultChart in Portal Kit. This sub process return a list of default charts. Follow instruction to create charts.

Change password process

Introduction

In Portal, the Change password process helps users to change their current password, you can customize this process to add more handling when user change password.

Customization

Create a callable sub process in your project with the changePassword(String,String) signature, make sure this signature is unique in your application. It must return an enums ChangePasswordStatus and the message showing to user (you can override this process in PortalKit):

Logout process

  1. Introduce an Axon.ivy project which has PortalTemplate as a required library.

  2. Copy the PortalStart process from PortalTemplate to your project. This process is new home page and administrator should register this link by global

  3. Refer to Customize Portal home to set new home page.

  4. Override the Logout process to customize the logout behavior.

  5. Create a callable sub process in your project with the getLogoutPage() signature to customize the page which will be redirect to after logout, default is Portal home page. Make sure this signature is unique in your application.

Express end page

Introduction

When the last task of Axon Express finish, express end page will be displayed. You can customize this by provide your own page.

Customization

  1. Create a new UI and start link of the new end page.

  2. Create a callable sub process in your project with the handleEndPage() signature, make sure this signature is unique in your application. It must return start link of new end page you define in step 1.

Navigate back

  • When a task finish, Portal will navigate back to previous page. For example if a task is started from homepage, then go back to homepage. In case task is started from task list, then go back to task list after finish.

  • Developer can also apply this feature to their own button e.g Cancel a task.

  • Just call PortalNavigator.navigateToPortalEndPage() in your button function

Hide technical stuffs

Hide technical roles

A technical role is the role which is not displayed anywhere (e.g. delegate, absence management). AXONIVY_PORTAL_ADMIN is a technical role by default.

To mark a role as a technical role, set the HIDE property with any value to the role.

Tip

Use the utility method of Portal to set property:

ch.ivy.addon.portalkit.util.RoleUtils.setProperty([YOUR_ROLE], ch.ivy.addon.portalkit.util.HIDE, [ANY_VALUE])

Hide technical tasks

A technical task is the task which is not displayed in any task lists of Portal.

To mark a task as a technical task, set the HIDE additional property with any value to the task.

Tip

Use the utility methods of Portal:

  • Set property: ch.ivy.addon.portalkit.util.TaskUtils.setHidePropertyToHideInPortal(ITask)

  • Remove property: ch.ivy.addon.portalkit.util.TaskUtils.removeHidePropertyToDisplayInPortal(ITask)

Hide technical cases

A technical case is the case which is not displayed in any case lists of Portal.

Tasks belong to the technical case is considered as technical tasks and should be hide as well.

To mark a case as a technical case, set the HIDE additional property with any value to the case.

Tip

Use the utility methods of Portal:

  • Set property: ch.ivy.addon.portalkit.util.CaseUtils.setHidePropertyToHideInPortal(ICase)

  • Remove property: ch.ivy.addon.portalkit.util.CaseUtils.removeHidePropertyToDisplayInPortal(ICase)

Additional case details page

Introduction

The additional case details page shows all custom fields of a case by clicking on "Show details" link in case details.

You can customize this page for each case by providing a relative URL to case.

Customization

  1. Create a new additional case details UI and a start process which will display the new UI.

  2. Store the URL of start process in "CUSTOMIZATION_ADDITIONAL_CASE_DETAILS_PAGE" additional property of case. You could use SetAdditonalCaseDetailPage.mod callable process, and input the friendly URL of process as parameter.

Tip

If you want to redirect user to external link, simply store that external link to "CUSTOMIZATION_ADDITIONAL_CASE_DETAILS_PAGE" additional property of case.

Global Search Result

Global Search Result

Follow these steps to customize the global search page:

  1. Introduce an Axon.ivy project which has PortalTemplate as a required library.

  2. Copy the PortalStart process from PortalTemplate to your project. This process is new home page and administrator should register this link by global

  3. Refer to Customize Portal home to set new home page.

  4. Create the customized search data model extends SearchResultsDataModel, and override the search method to filter your objects.

    Tip

    Note: it is recommended that lazy loading or pagination should be applied for custom tabs to have a good performance.

  5. Create the HTML dialog using /layouts/SearchResultsTemplate.xhtml, recommended to copy the SearchResults HTML dialog in PortalTemplate. In dataclass, change the dataModel to the above one, and in logic, also cast it.

  6. Define the custom-search section to add your customized tabs:

  7. Override the OpenPortalSearch callable process and change the HTML dialog to your customized one.

Tip

Hint: refer to the example in the PortalExamples project: CustomizedSearchResultsDataModel.java, CustomizedSearchResults HTML dialog, OpenPortalSearchOverride callable process