Additional Components

Process history

Introduction

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

In a page

In a dialog

How to use

First you need to link the cases to the business entity. Call the subprocess SetBusinessEntityId in the process which need 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:ch.ivy.addon.portal.component.ProcessHistory businessEntityId="resourceA247" >

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 with the attribute scrollHeight to configure the scroll bar of the list.

Note

If you use this component in a dialog, you must run this script processHistory.setup(); when the dialog is shown. For example:

<p:dialog widgetVar="process-history-dialog" id="process-history-dialog" width="800" height="500" header="Process history of Resource A247" onShow="processHistory.setup();">
  <ic:ch.ivy.addon.portal.component.ProcessHistory businessEntityId="resourceA247" chunkSize="6" scrollHeight="400" />
</p:dialog>

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 SetBusinessEntityId subprocess after the first Trigger or signal sending step.

Task Analysis

Introduction

Task Analysis component of Portal provides features for the user’s own permission StatisticAnalyzeTask in PortalTaskPermissions refer to Security section in Cockpit to analyze not only tasks but also cases. These features are:

1. Set of filters for both tasks and cases which allow user to filter and to find tasks, cases more better. More, user can create and manage their own filter set for future usage.

2. Dynamic result table with lots of information for both task and case.

3. Support export result as Excel files (currently we only support .xlsx extension).

How to use

Task Analysis component is integrated into Statistic widget. You can use this component directly when open Statistic widget. If you want to use this component, you only have to redirect to Task Analysis component with following code:

import javax.faces.context.FacesContext;
String taskAnalysisUrl = ivy.html.startRef("Start Processes/TaskAnalysis/start.ivp");
FacesContext.getCurrentInstance().getExternalContext().redirect(taskAnalysisUrl);

Process Chain

Introduction

Process Chain component of Portal provides features for users to know status of all steps in a process: the step’s working, these steps are done, these steps is not done. These features are:

1. Support to display all working steps or display only helpful steps as begin, last, current, previous current, next current steps.

2. Support to change the sharp of process chain: circle or line.

3. Support to change direction of process chain: horizontal or vertical.

How to use

Process Chain component can be integrated in any widget by including this component into a page. In order to use this component in a page, include this component to this page with following code:

<ic:ch.ivy.addon.portalkit.singleapp.process.ProcessChain id="process-chain-circle-horizontal"
componentId="component-circle-horizontal" shape="CIRCLE" direction="HORIZONTAL"
isShowAllSteps="FALSE" actualStepIndex="#{data.actualCurrentIndex}" steps="#{data.steps}" />

1. Must to set value for actualStepIndex parameter. This is current step index.

2. Must to set value for steps parameter. This is list of working steps.

3. Can change shape parameter to CIRCLE or LINE based on the requirement. Default value of this is CIRCLE.

4. Can change direction parameter to HORIZONTAL or VERTICAL based on the requirement. Default value of this is HORIZONTAL.

5. Can change isShowAllSteps parameter to TRUE or FALSE based on the requirement. Default value of this is FALSE.

Global growl

Introduction

This component is a global growl introduced in BasicTemplate, you can use it to display your messages in Portal.

<p:growl id="portal-global-growl" widgetVar="portal-global-growl" for="portal-global-growl-message" escape="false" showDetail="true" />

Display growl after finishing a task

After a task is finished, growl message appears as default via the DISPLAY_MESSAGE_AFTER_FINISH_TASK Portal variable.

Display growl after leaving a task

If DISPLAY_MESSAGE_AFTER_FINISH_TASK Portal variable is true, growl message will be displayed after a task is left.

Customization global growl message

For each task, you can turn it off or override it. Firstly, when you submit form to interact task, you need to put the overridePortalGrowl key to flash object with any value

Flash flash = FacesContext.getCurrentInstance().getExternalContext().getFlash();
flash.put("overridePortalGrowl", true);
flash.setRedirect(true);

It’s enough if you want to turn it off. To override the message, add facesMessage to this component. You can customize for each action as finish or cancellation a task.

import ch.ivy.addon.portal.generic.navigation.PortalNavigator;
import javax.faces.context.Flash;
import javax.faces.context.FacesContext;
import javax.faces.application.FacesMessage;

FacesMessage message = new FacesMessage("Task is done successfully", ivy.cms.co("/ch.ivy.addon.portalkit.ui.jsf/common/linkToCaseDetails",
     [PortalNavigator.buildPortalCaseDetailsUrl(ivy.case.getBusinessCase().getId())]));
FacesContext.getCurrentInstance().addMessage("portal-global-growl-message", message);

Flash flash = FacesContext.getCurrentInstance().getExternalContext().getFlash();
flash.put("overridePortalGrowl", true);
flash.setRedirect(true);
flash.setKeepMessages(true);

Please refer to GlobalGrowl dialog in portal-developer-examples project for more details.

Document table

This component is case document table with the features: upload, download and delete.

You can override the GetDocumentList, UploadDocument, DeleteDocument, DownloadDocument sub processes to extend these features, and add more columns, remove default columns in document table. Refer to the DocumentTableComponent process in portal-developer-examples project

User Selection

Introduction

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

How to use

You can include this component to any page. This component supports 2 styles of displaying a label.

1. Default style

   

   Code example:

   <ic:ch.ivy.addon.portalkit.component.UserSelection
         componentId="user-by-role-autocomplete"
         fromRoleNames="#{data.definedRoleNames}"
         selectedUser="#{data.selectedUserForDefinedRoles}"
         isRequired="true"
         label="Users from defined rolenames"/>
   

2. Floating label

   

   Code example:

   <ic:ch.ivy.addon.portalkit.component.UserSelection
         componentId="all-user-autocomplete"
         selectedUser="#{data.selectedUser}"
         label="Loading with all users (exclude gm2)"
         excludedUsernames="#{data.excludedUsernames}"
         isRequired="true" floatingLabel="true" />
   

Tip

Autocomplete element of user selection component allows inserting children and ajax event (Refer to UserSelection.xtml). Any child in UserSelection component will be re-parented into this autocomplete at the point of insertChildren tag. We introduce a facet named event for autocomplete so that ajax event can be nested.

For example:

I want to display user in dropdown list with format <Full name> (<username>) and when I select a user, a message will be displayed.

<ic:ch.ivy.addon.portalkit.component.UserSelection
   id="item-select-event-component"
   componentId="item-select-event-for-user-selection"
   fromRoleNames="#{data.definedRoleNames}"
   selectedUser="#{data.selectedUserForInsertChildren}"
   label="Demonstrate facet and children"
   isRequired="true" floatingLabel="true" >
   <p:column>
      <h:outputText value="#{userFormatBean.formatWithTip(user.displayName, user.name)}" />
   </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:ch.ivy.addon.portalkit.component.UserSelection>

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

Attributes of this component:

Name	Default	Type	Description
fromRoleNames	null	List<String>	User list will be loaded based on this list. All users will be loaded if you don’t define.
componentId	user-selection	String	Id of user autocomplete.
selectedUser	null	UserDTO	Required input and output value for selected user.
excludedUsernames	null	List<String>	Users will be excluded from user selection. This is applied if you use default completeMethod.
requiredMessage	This field is required	String	Message to be displayed when user autocomplete validation fails.
forceSelection	true	Boolean	Only accepts user from the list when it’s enabled.
minQueryLength	1	Boolean	Number of characters to be typed before starting to query.
completeMethod	completeUser	Method Expression	method for user autocomplete.
isDisabled	false	Boolean	Disable User Selection.
isRequired	false	Boolean	Marks User Selection as required.
isReadOnly	false	Boolean	Cannot change user when it’s enabled.
isRenderedMessage	true	Boolean	Specify the rendering of message for user field.
hightlight	true	Boolean	Highlights the first suggested user automatically.
floatingLabel	false	Boolean	Display label with floating style and labelPanelStyleClass can’t be applied if it’s enabled.
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	Autocomplete caches the searched result list if it’s enabled.
moreText	More…	String	The text shown in panel when the suggested list is greater than maxResults.
queryDelay	300	Integer	Delay to wait in milliseconds before sending each query to the server.
maxResults	100	Integer	Maximum number of results to be displayed.
scrollHeight	400	Integer	scrollHeight attribute of primefaces autocomplete.

Role Selection

Introduction

This component is used for choosing a role from a role list defined by a role name list. If you don’t define role name list, all roles will be loaded. It includes 1 label, 1 autocomplete and 1 message element to display message related to that autocomplete element.

How to use

You can include this component to any page. This component supports 2 styles of displaying a label.

1. Default style

   

   Code example:

   <ic:ch.ivy.addon.portalkit.component.RoleSelection
      componentId="role-from-defined-role-autocomplete"
      fromRoleNames="#{data.definedRoleNames}"
      selectedRole="#{data.selectedRoleForDefinedRoles}"
      isRequired="true"
      label="Roles from defined role names"/>
   

2. Floating label

Code example:

<ic:ch.ivy.addon.portalkit.component.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

Autocomplete element of role selection component allows inserting children and ajax event (Refer to RoleSelection.xtml). Any child in RoleSelection component will be re-parented into this autocomplete at the point of insertChildren tag. We introduce a facet named event for autocomplete so that ajax event can be nested.

For example:

I want to display role in dropdown list with format <Display Name> (<Member Name>) and when I select a role, a message will be displayed.

<ic:ch.ivy.addon.portalkit.component.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">
   <p:column>
      <h:outputText value="#{role.getDisplayName()} (#{role.getMemberName()})" />
   </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:ch.ivy.addon.portalkit.component.RoleSelection>

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

Attributes of this component:

Name	Default	Type	Description
fromRoleNames	null	List<String>	Child Role list will be loaded based on this list. All roles will be loaded if you don’t define.
componentId	role-selection	String	Id of role autocomplete.
selectedRole	null	RoleDTO	Required input and output value for selected role.
excludedRolenames	null	List<String>	Roles will be excluded from role selection. This is applied if you use default completeMethod.
requiredMessage	This field is required	String	Message to be displayed when role autocomplete validation fails.
forceSelection	true	Boolean	Only accepts role from the list when it’s enabled.
minQueryLength	1	Boolean	Number of characters to be typed before starting to query.
completeMethod	completeRole	Method Expression	method for role autocomplete.
isDisabled	false	Boolean	Disable Role Selection.
isRequired	false	Boolean	Marks Role Selection as required.
isReadOnly	false	Boolean	Cannot change role when it’s enabled.
isRenderedMessage	true	Boolean	Specify the rendering of message for role field.
hightlight	true	Boolean	Highlights the first suggested role automatically.
floatingLabel	false	Boolean	Display label with floating style and labelPanelStyleClass can’t be applied if it’s enabled.
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 used to determine the width of the input element.
messageStyleClass	null	String	Style class of message.
itemLabel	displayName	String	Displayed text of selected role item and roles in dropdown list.
cache	true	Boolean	Autocomplete caches the searched result list if it’s enabled.
moreText	More…	String	The text shown in panel when the suggested list is greater than maxResults.
queryDelay	300	Integer	Delay to wait in milliseconds before sending each query to the server.
maxResults	100	Integer	Maximum number of results to be displayed.
scrollHeight	400	Integer	scrollHeight attribute of primefaces autocomplete.

Portal dialog with icon

Introduction

This decorator is used to display dialog with big icon and header in the middle, and below is dialog content.

How to use

<ui:decorate template="/layouts/decorator/portal-dialog-with-icon.xhtml">
   <ui:param name="id" value="destroy-task-confirmation-dialog" />
   <ui:param name="widgetVar" value="destroy-task-dialog" />
   <ui:param name="appendTo" value="@(body)" />
   <ui:param name="iconClass" value="icon ivyicon-delete-1" />
   <ui:param name="iconStyleClass" value="portal-dialog-error-icon" />
   <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskList/destroyTaskMessage')}" />

   <ui:define name="dialogFooter">
      <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
         onclick="PF('destroy-task-dialog').hide();" styleClass="u-mar-right-15"/>
      <p:commandButton id="confirm-destruction" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
         icon="#{visibilityBean.generateButtonIcon('icon ivyicon-remove')}"
         actionListener="#{logic.destroyTask(task)}"
         oncomplete="PF('destroy-task-dialog').hide()"
         update="#{cc.clientId}:task-detail-general-container"
         process="@this"/>
   </ui:define>
</ui:decorate>

Please refer to PortalDialogExample.xhtml in portal-developer-examples for more examples.

This decorator provide 2 custom sections:

• dialogFooter: you have to define this section, it contains footer of dialog.

• dialogContentSection: this is optional, if you want to use your custom style for your dialog content, please define this section.

Parameters of this decorator:

Name	Required	Default	Description
id	Yes		Dialog’s id
widgetVar	Yes		Dialog’s widget bar
closable	No	false	Defines if close icon should be displayed or not.
closeOnEscape	No	true	Defines if dialog should close when escape key is pressed.
maxWidth	No	500px	Defines max-width of dialog.
styleClass	No		Defines styleClass for dialog
responsive	No	true	In responsive mode, dialog adjusts itself based on screen width.
rendered	No	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
dynamic	No	false	Dynamic mode allows dialog to fetch it’s contents before it’s shown rather than on page load which is useful to reduce initial page load times. Default is false.
appendTo	No		Alternative to appendToBody. Appends the dialog to the given search expression.
iconClass	No	icon ivyicon-information-circle	Icon classes.
iconStyleClass	No	portal-dialog-info-icon	Specific additional style for icon, color for example. We already provided 3 classes: portal-dialog-info-icon, portal-dialog-warning-icon, portal-dialog-error-icon
headerText	No	Are you sure?	Dialog header text.
dialogContent	No		Dialog’s content. If you don’t have this parameter, please define dialogContentSection

Portal cronjob trigger

Portal provides a helpful bean ch.ivy.addon.portalkit.util.CronByGlobalVariableTriggerStartEventBean using the Quartz framework which help trigger cron job by global variable. The global variable should contains the cron job Pattern, to trigger to process on the right time.

There is a online Cron Maker could help you to create your own cron job pattern.