Portal Components

In portal-components, we introduced some components independent of the Portal. You don’t need to import the Portal projects to use them.

These components fully support both Freya and Serenity themes of Primefaces.

Process History

Process Chain

Document Table

Security Member Name And Avatar

User Selection

Role Selection

Process Viewer

Please refer to project portal-components-examples for more details on use and customization, as well as look and feel of each component in supported themes.

Process History

Introduction

This component is a lazy loading list that displays all business cases of a business entity in your application. You can include this component everywhere:

In a page

process-history-example

In a dialog

process-history-dialog-example

Note

If you use this component in Portal, redirect to case details page when clicking on a row.

How to Use

First, you have to link the cases to the business entity. Call the subprocess SetBusinessEntityId in each process which needs to be linked and input an identifier unique to your business entity. The subprocess will set the id to the additional property “CASE_BUSINESS_ENTITY_PROPERTY” of the business case.

Link the cases to the business entity.

Call the subprocess SetCaseBusinessEntity in the process which needs to be linked and input an identifier unique to your business entity. The subprocess will set the id to the additional property “CASE_BUSINESS_ENTITY_PROPERTY” of the business case.

Include the process history component into your page:

<ic:com.axonivy.portal.components.ProcessHistory businessEntityId="alpha" />

The value of the attribute businessEntityId must match the id input into the subprocess in the first step.

By default, the component will load 20 cases at a time. You can change this by setting the attribute chunkSize to the number you want. You should use this attribute alongside the attribute scrollHeight to configure the scroll bar of the list.

Attributes of this component:

Name	Default	Type	Description
businessEntityId		String	The value of this attribute must match the id input into the subprocess in the first step.
chunkSize	20	Integer	Integer value to size of cases that will be loaded when scroll down.
scrollHeight	600	Integer	Integer value to configure the height of the list.
emptyMessage	There are no cases	String	The message will be displayed if there are no cases.
showCasesOfOwner	false	Boolean	Boolean value to specify the displaying cases of owner, when set to true cases of owner will be displayed.
dateTimePattern	dd.MM.yyyy HH:mm	String	Datetime pattern for `created` column.

Note

If you use this component in a dialog, you have to run the script processHistory.setup(); when the dialog is shown, e.g.:

<p:dialog widgetVar="process-history-dialog" id="process-history-dialog" width="800" height="500" resizable="false"
   header="Process history of Beta Company" modal="true" onShow="processHistory.setup();">
   <ic:com.axonivy.portal.components.ProcessHistory businessEntityId="beta" chunkSize="10" scrollHeight="400" />
      </p:dialog>

Override the callable subprocess OpenCaseDetailsHook to handle navigation when clicking on a case in the Process History component.

Please refer to the process ProcessHistoryExample in portal-components-examples for more details on how to use the Process History.

If you want to customize its style, please refer to Style Customization.

Important

If your process has a Trigger component or sends a signal to start another process with the option “Attach to Business Case that triggered this process” selected, the current case of the process will become a technical case and will not be loaded into the process history list. In this case, you need to call the SetCaseBusinessEntity subprocess after the first Trigger or signal sending step to be able query this case in the process history.

Migrate from Deprecated Process History

Replace code in HTML files: replace ic:ch.ivy.addon.portal.component.ProcessHistory with ic:com.axonivy.portal.components.ProcessHistory.
Optional: set showCaseOfOwner to true if you want to show the cases owned by the login user.
Optional: set dateTimePattern to a specific date/time pattern if you want to show the date/time in a unique format different from the default format (dd:MM.yyyy HH:mm).
Optional: Override the subprocess OpenCaseDetailsHook to handle navigation when clicking on a case in the Process History component.

For applications using the Portal without IFrame:
- Copy the contents of the subprocess OpenPortalCaseDetailsHook in portal to the overridden subprocess OpenCaseDetailsHook.
For applications using the Portal with an IFrame:
- Set attribute isOpenInFrame to true.
- Modify the subprocess OpenCaseDetailsHook to generate caseDetailsUrl. Process History component will navigate to this URL when the user clicks on a case.

Process Chain

Introduction

The Process Chain component provides status information for all steps in a process: the currently executable steps, done steps, and open steps. Its features are:

Display all currently executable steps, or display only helpful steps like begin, last, current, previous, and next steps.
Change the shape of the process chain: circle or line.
Change the orientation of the process chain: horizontal or vertical.

process-chain

How to Use

You can integrate the Process Chain component in any widget by including the component on a page with following code:

       <ic:com.axonivy.portal.components.ProcessChain id="process-chain-circle-horizontal" componentId="component-circle-horizontal" shape="CIRCLE" direction="HORIZONTAL"
isShowAllSteps="false" actualStepIndex="0" steps="#{['Step 1','Step 2','Step 3','Step 4','Step 5','Step 6','Step 7','Step 8','Step 9']}" />

You have to set the parameters
- actualStepIndex. This is the index of the current step.
- steps. This is list of working steps.
You may change the parameters
- shape to CIRCLE or LINE according to your requirements. Default is CIRCLE.
- direction to HORIZONTAL or VERTICAL . Default is HORIZONTAL.
- isShowAllSteps to TRUE or FALSE . Default is FALSE.

Name	Default	Type	Description
componentId	process-chain-component-id	String	The component identifier.
steps			List of step in the process chain.
actualStepIndex	0	Integer	Actual step index or current step index.
direction	HORIZONTAL	String	Direction of process chain: VERTICAL, HORIZONTAL.
shape	CIRCLE	String	Shape of process chain: CIRCLE, LINE.
isShowAllSteps	false	Boolean	Show all steps of the process chain.

If you want to customize its style, please refer to Style Customization.

Migrate from Deprecated Process Chain

Replace code in HTML files: replace ch.ivy.addon.portalkit.singleapp.process.ProcessChain with com.axonivy.portal.components.ProcessChain.

Document Table

This component is a case document table with the features display, upload, download and delete document entries.

document-table

To extend features of this component, please override these subprocesses: GetDocumentItems, UploadDocumentItem, DeleteDocumentItem, and DownloadDocumentItem. You can also add a new column or remove default columns of the document table.

Code Example:

<h:form id="form">
   <ic:com.axonivy.portal.components.DocumentTable id="document-table-component"
      allowedUploadFileTypes="doc,docx,xls,xlsx,xlsm,csv,pdf,ppt,pptx,txt"
      typeSelectionItems="#{documentTableExampleBean.documentTypes}">
      <f:facet name="componentHeader">
         <h2>This is the customized document table component header</h2>
      </f:facet>
      <p:column headerText="Creator" styleClass="document-creator-column">
         <h:outputText id="creator" value="#{document.creation.userName}" title="#{document.creation.userName}" />
      </p:column>
      <p:column headerText="Created time" styleClass="document-created-column">
         <h:outputText id="created-time" value="#{document.creation.timestamp}" title="#{document.creation.timestamp}" />
      </p:column>
      <p:column headerText="Customer" styleClass="document-customer-column">
         <h:outputText id="customer" value="#{document.customer}" title="#{document.customer}" />
      </p:column>
      <f:facet name="componentFooter">
         <h2>This is the customized document table component footer</h2>
      </f:facet>
   </ic:com.axonivy.portal.components.DocumentTable>
</h:form>

Refer to process DocumentTableExample in project portal-components-examples for more details.

Attributes of this component:

Name	Default	Type	Description
nameColumnRendered	TRUE	Boolean	Boolean value to specify the rendering of the name column, when set to false name column will not be rendered.
sizeColumnRendered	TRUE	Boolean	Boolean value to specify the rendering of the size column, when set to false size column will not be rendered.
typeColumnRendered	TRUE	Boolean	Boolean value to specify the rendering of the type column, when set to false type column will not be rendered.
functionColumnRendered	TRUE	Boolean	Boolean value to specify the rendering of the function column, when set to false function column will not be rendered.
uploadRendered	TRUE	Boolean	Boolean value to specify the rendering of the upload icon, when set to false upload icon will not be rendered.
downloadRendered	TRUE	Boolean	Boolean value to specify the rendering of the download icon, when set to false download icon will not be rendered.
deleteRendered	TRUE	Boolean	Boolean value to specify the rendering of the delete icon, when set to false delete icon will not be rendered.
messageRendered	TRUE	Boolean	Boolean value to specify the rendering of the message, when set to false message will not be rendered.
fileLimit	-1	Integer	Number of files are in the given ICase.
updatedComponentAfterUploaded	null	String	Component will be triggered the update after document is uploaded.
downloadIcon	fa-download	String	Icon class will be displayed in download link.
downloadStyleClass	null	String	Styles for download link.
deleteIcon	fa-trash-o	String	Icon class will be displayed in delete link.
deleteStyleClass	null	String	Styles for delete link.
updatedComponentAfterDeleted	null	String	Component will be triggered the update after document is deleted.
selectedType		String	String value to specify the selected document types, by default it will be first element in `typeSelectionItems`.
typeSelectionItems	DOCUMENTATION,CONTRACT,INFORMATION,EMAIL,OTHERS	String	String value to specify the list of document type.
enableScriptCheckingForUploadedDocument		Boolean	Boolean value to specify script checking. Set to `true` to enable script checking. The setting will detect Portal setting `Portal.Document.EnableScriptChecking` as its default value, refer to HowTo: Update Portal Settings for more details. If the Portal setting is not available, defaults to `false`.
enableVirusScannerForUploadedDocument		Boolean	Boolean value to specify virus scanning. Set to `true` to enable virus scanning. Refer to Virus Scanning Setting for more details. The setting will detect Portal setting `Portal.Document.EnableVirusScanner` as its default value, refer to HowTo: Update Portal Settings for more details. If Portal setting is not available, default value is `false`.
allowedUploadFileTypes		String	String value to specify the list of file extension that can be uploaded. The setting will detect Portal setting `Portal.Document.WhitelistExtension` as its default value, refer to HowTo: Update Portal Settings for more details. If Portal setting is not available, default value is `doc,docx,xls,xlsx,xlsm,csv,pdf,ppt,pptx,txt,zip,jpg,jpeg,bmp,png`.

Script checking and virus scanning

The Document Table has options to check for harmful scripts and viruses inside the file before uploading it to the system.

Set enableScriptCheckingForUploadedDocument to true to check for harmful scripts.

Set enableVirusScannerForUploadedDocument to true to enable virus scanning.

Code example:

<ic:com.axonivy.portal.components.DocumentTable id="document-table-component"
   enableScriptCheckingForUploadedDocument="true"
   enableVirusScannerForUploadedDocument="true" />

Please refer to Virus Scanning Settings for more details about virus scanning.

Migrate from Deprecated Document Table

Replace code in HTML files: replace ic:ch.ivy.addon.portalkit.component.document.DocumentTable with ic:com.axonivy.portal.components.DocumentTable.
Consider updating value of the new attributes enableScriptCheckingForUploadedDocument, enableVirusScannerForUploadedDocument and allowedUploadFileTypes as required.
Override subprocesses if you want and adapt your business accordingly.

New sub process

Deprecated sub process

GetDocumentItems

GetDocumentList

UploadDocumentItem

UploadDocument

DeleteDocumentItem

DeleteDocument

DownloadDocumentItem

DownloadDocument
If you have customized IvyDocument make sure to extend it from class com.axonivy.portal.components.ivydata.bo.IvyDocument.
Attributes typeSelectionItems and selectedType now use com.axonivy.portal.components.enums.DocumentType. Please replace ch.ivy.addon.portalkit.enums.DocumentType with com.axonivy.portal.components.enums.DocumentType.

Note

Please remove redundant overridden configurations, subprocesses, and data classes such as GetDocumentListOverride, UploadDocumentOverride, etc.

Security Member Name And Avatar

Introduction

This component is used to display the name and avatar of a security member in the ivy security system. It is also integrated in User Selection and Role Selection.

How to Use

You can insert this component into any page.

Code example using the top-level role (Everybody):

<pc:securityMemberNameAndAvatar displayName="#{ivy.security.roles().topLevel().displayName}"
   securityMember="#{ivy.security.roles().topLevel()}" />

Code example using the current session user:

<pc:securityMemberNameAndAvatar displayName="#{ivy.session.sessionUser.displayName}"
   securityMember="#{ivy.session.sessionUser}" />

This component offers the following attributes:

Name	Default	Type	Required	Description
id		String	false	Id of component.
securityMember	null	ISecurityMember	true	Security member in the ivy security system.
isShowAvatar		Boolean	false	Boolean value to specify avatar showing. Set to true to show avatar. The setting will detect Portal setting Portal.ShowAvatar as its default value, refer to HowTo: Update HowTo: Update Portal Settings for more details. If the Portal setting is not available, defaults to true.
displayNameId	username	String	false	Id of display name element.
displayName	null	String	true	The security member name is displayed.
displayNameRendered	true	Boolean	false	If false, the security member name is hidden.
displayNameStyleClass	null	String	false	The style class is applied for display name element.
containerStyleClass	null	String	false	The style class is applied for container element.
isStandAlone	true	Boolean	false	Set to false when you use this component in User Selection and Role Selection.

Refer to process SecurityMemberNameAndAvatarExample in project portal-components-examples for more details.

User Selection

Introduction

This component is used for selecting a single user from a list of users defined by a role name list. If you don’t define the role name list, all users will be loaded. It includes a label, an autocomplete and one message element to display a message related to that autocomplete element.

How to Use

You can insert this component into any page. This component supports two styles to display a label.

Default Style

user-selection

Code example:

<ic:com.axonivy.portal.components.UserSelection componentId="default-user-autocomplete"
   selectedUser="#{data.selectedUser}" label="Default user selection"
   isRequired="true" labelPanelStyleClass="ui-g-6 ui-md-6 ui-sm-12"
   autoCompleteStyleClass="width-100" autoCompletePanelStyleClass="ui-g-6 ui-sm-12" />

Floating Label

user-selection-floating-label

Code example:

<ic:com.axonivy.portal.components.UserSelection componentId="all-user-autocomplete"
   hightlight="false" selectedUser="#{data.selectedUserForExcludingUsers}"
   label="Loading users (exclude gm1, gm2, admin)" autoCompleteStyleClass="width-100"
   autoCompletePanelStyleClass="ui-g-12 floating-label-margin-top"
   excludedUsernames="#{data.excludedUsernames}" floatingLabel="true" />

Tip

The autocomplete element of the user selection component allows to insert children and ajax events (Refer to UserSelection.xhtml). Any child in the UserSelection component will be re-parented into this autocomplete at the location of the insertChildren tag. We introduce a facet named event for autocomplete so that the ajax event can be nested, as well.

An example:

I want to display users in a dropdown list formatted as “<Full name> (<username>)”. When I select a user, a message shall be displayed.

user-selection-with-children-and-ajax-event

<ic:com.axonivy.portal.components.UserSelection id="item-select-event-component"
   componentId="item-select-event-for-user-selection" floatingLabel="true"
   fromRoleNames="#{data.definedRoleNames}" label="Demonstrate facet and children"
      selectedUser="#{data.selectedUserForInsertChildren}"
   autoCompleteStyleClass="width-100"
   autoCompletePanelStyleClass="ui-g-12 floating-label-margin-top" hasCustomizedSelectionList="true">
      <p:column>
         <pc:securityMemberNameAndAvatar displayName="#{user.getDisplayName()} (#{user.getMemberName()})" securityMember="#{user}" isStandAlone="false" />
      </p:column>
      <f:facet name="event">
         <p:ajax event="itemSelect" listener="#{logic.showSelectedUser}"
            update="#{p:component('item-select-event-for-user-selection-message')}"/>
      </f:facet>
</ic:com.axonivy.portal.components.UserSelection>

Please refer to UserSelectionExample.xhtml in project portal-components-examples for more details.

This component offers the following attributes:

Name	Default	Type	Description
fromRoleNames	null	List<String>	User list will be generated based on this list. If empty, all users will be loaded.
componentId	user-selection	String	Id of user autocomplete.
selectedUser	null	UserDTO	Required input and output value for selected user.
excludedUsernames	null	List<String>	Users to be excluded from user selection. This is applied if you use the default completeMethod.
requiredMessage	This field is required	String	Message to be displayed when user autocomplete validation fails.
forceSelection	true	Boolean	If true, only accepts user from the list.
minQueryLength	1	Boolean	N”umber of characters to be typed before starting to offer autocomplete.”
completeMethod	completeUser	Method Expression	Method for user autocomplete.
isDisabled	false	Boolean	If true, disable User Selection.
isRequired	false	Boolean	If true, User Selection is required.
isReadOnly	false	Boolean	If true, User Selection cannot be changed.
isRenderedMessage	true	Boolean	If true, message for user field is rendered.
hightlight	true	Boolean	If true, highlight the first suggested user automatically.
floatingLabel	false	Boolean	If true, display label with floating style and labelPanelStyleClass can’t be applied.
autocompleteStyleClass	null	String	Style class of user autocomplete.
autoCompletePanelStyleClass	null	String	Style class of user autocomplete panel.
inputStyleClass	null	String	Style class of user autocomplete input.
labelPanelStyleClass	null	String	Style class of label panel.
labelStyleClass	null	String	Style class of label.
label	null	String	Text of label for User Selection component.
size	null	Integer	Number of characters used to determine the width of the input element.
messageStyleClass	null	String	Style class of message.
itemLabel	displayName	String	Displayed text of selected user item and users in dropdown list.
cache	true	Boolean	If true, autocomplete caches search result list.
moreText	More…	String	The text shown in panel when the suggested list is greater than maxResults.
queryDelay	300	Integer	Delay in milliseconds before sending a query to the server.
maxResults	100	Integer	Maximum number of results to be displayed.
scrollHeight	400	Integer	scrollHeight attribute of primefaces autocomplete.
hasCustomizedSelectionList	false	Boolean	If true, the customized selection list is displayed.
isShowAvatarInSelectionList		Boolean	Boolean value to specify avatar showing. Set to true to show avatar. The setting will detect Portal setting Portal.ShowAvatar as its default value, refer to HowTo: Update HowTo: Update Portal Settings for more details. If the Portal setting is not available, defaults to true.
displayNameRenderedInSelectionList	true	Boolean	If false, the name of security member in the selection list is hidden.
displayNameInSelectionListStyleClass	null	String	Style class of display name in the selection list
selectionListContainerStyleClass	null	String	Style class of item’s container in the selection list

Migrate from Deprecated User Selection

Replace code in HTML files: replace ic:ch.ivy.addon.portalkit.component.UserSelection with ic:com.axonivy.portal.components.UserSelection.
Replace ch.ivy.addon.portalkit.dto.UserDTO with com.axonivy.portal.components.dto.UserDTO.

Note

If you stored class ch.ivy.addon.portalkit.dto.UserDTO in your database, you have to update the database manually.

Role Selection

Introduction

This component is used to select a role from a given list of roles. If you don’t define the role list, all roles will be loaded. It includes one label, one autocomplete and one message element to display messages related to this autocomplete element.

How to Use

You can insert this component into any page. This component offers the following two styles to display its label.

Default Style

role-selection

Code example:

<ic:com.axonivy.portal.components.RoleSelection
   componentId="role-from-defined-role-autocomplete"
   fromRoleNames="#{data.definedRoleNames}"
   selectedRole="#{data.selectedRoleForDefinedRoles}"
   isRequired="true"
   label="Roles from defined role names"/>

Floating Label

role-selection-floating-label

Code example:

<ic:com.axonivy.portal.components.RoleSelection
   componentId="floating-label-and-exclude-role-autocomplete" hightlight="false"
   selectedRole="#{data.selectedRole}"
   label="Loading with all roles (exclude CaseOwner, GeneralManager)"
   excludedRolenames="#{data.excludedRoleNames}"
   isRequired="true" floatingLabel="true" />

Tip

The autocomplete element of the role selection component allows you to insert children and ajax events (Refer to RoleSelection.xhtml). Any child in the RoleSelection component will be re-parented into this autocomplete at the location of the insertChildren tag. We introduced a facet named event for autocomplete so that the ajax event can be nested, as well.

For example:

I want to display roles in dropdown list formatted as “<Display Name> (<Member Name>)”. When I select a role, a message shall be displayed.

role-selection-with-children-and-ajax-event

<ic:com.axonivy.portal.components.RoleSelection
   id="item-select-event-component"
   componentId="item-select-event-for-role-selection"
   fromRoleNames="#{data.definedRoleNames}"
   selectedRole="#{data.selectedRoleForInsertChildren}"
   label="Demonstrate facet and children"
   autoCompleteStyleClass="width-100"
   autoCompletePanelStyleClass="ui-g-12 floating-label-margin-top"
   isRequired="true" floatingLabel="true" hasCustomizedSelectionList="true">
   <p:column>
      <pc:securityMemberNameAndAvatar displayName="#{role.getDisplayName()} (#{role.getMemberName()})" securityMember="#{role}" isStandAlone="false" />
   </p:column>
   <f:facet name="event">
      <p:ajax event="itemSelect" listener="#{logic.showSelectedRole}"
         update="#{p:component('item-select-event-for-role-selection-message')}" />
   </f:facet>
</ic:com.axonivy.portal.components.RoleSelection>

Please refer to RoleSelectionExample.xhtml in portal-components-examples project for more details.

This component offers the following attributes:

Name	Default	Type	Description
fromRoleNames	null	List<String>	Child Role list will be loaded based on this list. If empty, all roles will be loaded.
componentId	role-selection	String	Id of role autocomplete.
selectedRole	null	RoleDTO	Required input and output value for selected role.
excludedRolenames	null	List<String>	Roles to be excluded from role selection. Applied if you use default completeMethod.
requiredMessage	This field is required	String	Message to be displayed when role autocomplete validation fails.
forceSelection	true	Boolean	If true, only accept roles from the given list.
minQueryLength	1	Boolean	Number of characters to be typed before starting to offer autocomplete.
completeMethod	completeRole	Method Expression	Method for role autocomplete.
isDisabled	false	Boolean	If true, Role Selection is disabled.
isRequired	false	Boolean	If true, Marks Role Selection is required.
isReadOnly	false	Boolean	If true, user cannot change role.
isRenderedMessage	true	Boolean	Specify the rendering of message for role field.
hightlight	true	Boolean	Highlights the first suggested role automatically.
floatingLabel	false	Boolean	If true, display label with floating style and labelPanelStyleClass can’t be applied.
autocompleteStyleClass	null	String	Style class of role autocomplete.
autoCompletePanelStyleClass	null	String	Style class of role autocomplete panel.
inputStyleClass	null	String	Style class of role autocomplete input.
labelPanelStyleClass	null	String	Style class of label panel.
labelStyleClass	null	String	Style class of label.
label	null	String	Text of label for role selection component.
size	null	Integer	Number of characters. usesed to determine the width of the input element.
messageStyleClass	null	String	Message style class.
itemLabel	displayName	String	Displayed text of selected role and roles in dropdown list.
cache	true	Boolean	If true, autocomplete caches the search result list.
moreText	More…	String	The text shown in panel when the suggested list is greater than maxResults.
queryDelay	300	Integer	Delay in milliseconds before sending a query to the server.
maxResults	100	Integer	Maximum number of results to be displayed.
scrollHeight	400	Integer	scrollHeight attribute of primefaces autocomplete.
hasCustomizedSelectionList	false	Boolean	If true, the customized selection list is displayed.
isShowAvatarInSelectionList		Boolean	Boolean value to specify avatar showing. Set to true to show avatar. The setting will detect Portal setting Portal.ShowAvatar as its default value, refer to HowTo: Update HowTo: Update Portal Settings for more details. If the Portal setting is not available, defaults to true.
displayNameRenderedInSelectionList	true	Boolean	If false, the name of security member in the selection list is hidden.
displayNameInSelectionListStyleClass	null	String	Style class of display name in the selection list
selectionListContainerStyleClass	null	String	Style class of item’s container in the selection list

Migrate from Deprecated Role Selection

Replace code in HTML files: replace ic:ch.ivy.addon.portalkit.component.RoleSelection with ic:com.axonivy.portal.components.RoleSelection.
Replace ch.ivy.addon.portalkit.dto.RoleDTO with com.axonivy.portal.components.dto.RoleDTO.

Note

If you stored class ch.ivy.addon.portalkit.dto.RoleDTO in your database, you have to update the database manually.

Process Viewer

Introduction

The Process Viewer component provides a visual representation of the process flow from a given Case ID or Process relative link.

portal-process-viewer-component

Attributes of this component:

Name	Type	Description
caseId	Long	Case ID.
processLink	String	Process or Case Map relative link.
containerStyleClass	String	Component container style class.

How to Use

You can integrate the Process Viewer component in any page by including following code.

You have to set one of parameters below:

caseId: show the process or Case Map of the case has ID equals to caseId.

<ic:com.axonivy.portal.components.ProcessViewer caseId="000001" containerStyleClass="process-viewer-container" />

processLink: show the process or Case Map which by its defined relative link.

<ic:com.axonivy.portal.components.ProcessViewer processLink="/designer/pro/portal-components-examples/182E92730FF57035/start.ivp" containerStyleClass="process-viewer-container" />

Warning

Sub Case (Technical Case) or Express Workflow Process is not supported.

You can customize the container style by using parameter containerStyleClass

Refer to process ProcessViewerExample in project portal-components-examples for more details.

If you want to customize its style, please refer to Style Customization.

Style Customization

How to customize

You have to add a new css file to your resources and import it into your template.

Code Example:

<ui:composition template="/layouts/basic-10.xhtml">
   <ui:define name="title">test</ui:define>
   <ui:define name="content">
      <ic:com.axonivy.portal.components.ProcessHistory businessEntityId="alpha" chunkSize="12" scrollHeight="600" />
      <h:outputStylesheet name="layouts/styles/process-history-customize.css" />
   </ui:define>
</ui:composition>

Note

You have to place your css file in a <h:outputStylesheet /> below the component to override defined styles.

Within this file you can override default css variables of components. For example, the --process-history-description-text-color:
```
:root {
   --process-history-description-text-color: red;
}
```

List of css variables that you can override

Process Chain

Variable	Default value	Description
--process-chain-process-step-font-size	12px	Size of process step in of process chain component.
--process-chain-body-background-color	rgba(0,0,0,0)	Background color of waiting circle process steps.
--process-chain-menu-color	var(--primary-color, hsl(195, 100%, 29%))	Color of process steps.
--process-chain-link-color	#D9DADA	Link color between process steps.
--process-chain-current-circle-horizontal-step-title-font-weight	bold	Font weight of circle horizontal process step title.
--process-chain-current-circle-vertical-step-title-font-weight	bold	Font weight of circle vertical process step title.
--process-chain-current-line-horizontal-step-title-font-weight	bold	Font weight of line horizontal process step title.
--process-chain-current-line-vertical-step-title-font-weight	bold	Font weight of line vertical process step title.

Process History

Variable	Default value	Description
--process-history-header-border-bottom-color	#D9DADA	Color of bottom header’s border.
--process-history-unsortable-header-font-size	1.4rem	Text size of cell header that is unsortable.
--process-history-unsortable-header-text-color	#9C9D9D	Text color of cell header that is unsortable.
--process-history-description-text-color	#9C9D9D	Text color of item description.
--process-history-item-background-color	rgba(var(--white, #000000), 0.2)	Background color of item.
--process-history-item-border-bottom-color	#D9DADA	Color of bottom item’s border.
--process-history-item-border-hover	1px solid #90DDE9	Hover color of item’s border.
--process-history-item-background-hover	rgba(144, 221, 233, 0.24)	Hover background color of item.
--process-history-state-in-progress-color	rgba(7, 140, 255, 1)	Color of in-progress state.
--process-history-state-done-or-resume-color	#4EB41C	Color of done or resumed state.
--process-history-empty-message-label-color	hsl(64, 1%, 48%)	Text color of message label when there is no item.
--process-history-empty-message-label-font-size	1.2rem	Font size of of message label when there is no item.

Process Viewer

Variable	Default value	Description
--process-viewer-data-has-error-message-font-weight	bold	Error message font weight.
--process-viewer-data-has-error-message-font-size	1.2rem	Error message font size.
--process-details-column-title-font-size	0.85rem	Process details column title font size.

New sub process	Deprecated sub process
GetDocumentItems	GetDocumentList
UploadDocumentItem	UploadDocument
DeleteDocumentItem	DeleteDocument
DownloadDocumentItem	DownloadDocument