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 administrators can change logos and colors by GUI, refer to Change logos and colors

Portal applies LESS framework to support you in customizing the styles of Portal. There are 3 files: theme.less (shouldn't be customized), 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.

    Important

    Do not change font-family property values.
  • 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) 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-dimension-transition-duration: it is the expanding/collapsing transition duration of the application menu.

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

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 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

In your project, override the process LoadSubMenuItems in PortalTemplate 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. So we set fix length for each widget. Length of Process widget is 270 pixels, Task widget is 520 pixels and Task widget is 270 pixels.

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 your statistics data

The template has a parameter: statistic to display the statistic data. Their default values are the tasks which the session user can work on.

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

<ui:param name="statistic" value="#{logic.getStatistic()}" /> <!-- A method returns StatisticData -->

</ui:composition>

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.

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 cases users can interact with. In order to show needed case's information, Portal supports overriding concept for CaseItem (inside CaseWidget). Each CaseItem contains two part: CaseHeader and CaseBody.

Important

CaseHeader area is not supported to override yet.

How to override case item

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

  2. Copy the PortalStart process from PortalTemplate to your project.

  3. Introduce a new HtmlDialog Page which uses the template /layouts/PortalCasesTemplate.xhtml (refer to Responsiveness to override responsiveness). The PortalCasesTemplate is designed such that it will insert the content between its predefined place holder. Put your customized content in there. There is a placeholder named: caseBody. The effect only takes place when the ui:param named useOverrideBody is set to true. Clients can set this parameter to a value expression for flexibility. For example:

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

    <ui:param name="useOverrideBody" value="#{not case.getCustomVarCharField1().isEmpty()}" />

    <ui:define name="caseBody">

    This is the customized content of the case: #{case.getId()}

    <ui:fragment rendered="#{case.getCustomVarCharField1().equals('I am a secret')}">

    <h:outputText value="I'm a secret case so I'm displayed differently" />

    </ui:fragment>

    <ui:fragment rendered="#{case.getCustomVarCharField1().equals('I am even more secret')}">

    <!-- Put your secret content here -->

    </ui:fragment>

    </ui:define>

    </ui:composition>

  4. If you need to apply the responsiveness behavior of Portal, 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.

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

  6. Introduce a Business Process which starts the page PortalHome. To make the overriding take effect, the client must use this process to start Portal (instead of the original one on PortalTemplate). Remember to set the home page variable to the new home page url (see Portal home for more details).

  7. In case you want to use the CaseTempate template, you may want to define the caseStatusTab with your customized content. For example:

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

    <ui:define name="caseStatusTab">

    This is the customized content of the case: #{caseId}

    </ui:define>

    </ui:composition>

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();

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 task lists in your project, you may want to set filterGroupId to an unique identifier for each of your PortalCases.xhtml across your projects

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 a callable sub process in your project with the createDefaultUserProcesses() signature, make sure this signature is unique in your application. It must return a list of user processes: defaultUserProcesses(List<UserProcess>) (you can override this process in PortalKit):

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.

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. Override the LogoutPage process to customize the page which will be redirect to after logout, default is Portal home page.

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. Generate a relative URL from start process which created in step 1.

    Store the URL in "CUSTOMIZATION_ADDITIONAL_CASE_DETAILS_PAGE" additional property of case.

Tip

If you simply want display information from case, you could use SetAdditonalCaseDetailPage.mod callable process. You just need input the friendly URL of process.