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:
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.
Dynamic result table with lots of information for both task and case.
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 ch.ivy.addon.portal.generic.navigation.PortalNavigator;
import java.util.HashMap;
import javax.faces.context.FacesContext;
String taskAnalysisUrl = PortalNavigator.buildUrlByKeyword("showTaskAnalysis.ivp", "Start Processes/PortalStart/showTaskAnalysis.ivp", new HashMap());
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 are not done. These features are:
Support to display all working steps or display only helpful steps as begin, last, current, previous current, next current steps.
Support to change the shape of process chain: circle or line.
Support to change the 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}" />
Must to set value for
actualStepIndex
parameter. This is current step index.Must to set value for
steps
parameter. This is list of working steps.Can change
shape
parameter toCIRCLE
orLINE
based on the requirement. Default value of this isCIRCLE
.Can change
direction
parameter toHORIZONTAL
orVERTICAL
based on the requirement. Default value of this isHORIZONTAL
.Can change
isShowAllSteps
parameter toTRUE
orFALSE
based on the requirement. Default value of this isFALSE
.
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
Portal.DisplayMessageAfterFinishTask
Portal variable.
Display growl after leaving a task
If Portal.DisplayMessageAfterFinishTask
Portal variable is true, growl message will be displayed after a task is left.
Customization global growl message for task not using IFrame
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);
Customization global growl message for task using IFrame
If Portal.DisplayMessageAfterFinishTask
Portal variable is true, before a task is finished/left, you can trigger displaying
customized message after task is finished/left by calling below API:
import ch.ivy.addon.portalkit.publicapi.PortalGlobalGrowInIFrameAPI;
PortalGlobalGrowInIFrameAPI api = new PortalGlobalGrowInIFrameAPI();
api.displayCustomizedMessage("Your customized message");
Please refer to GlobalGrowl Start Process 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.
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"/>
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.
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"/>
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.