Skip to content

Commit

Permalink
Document/ivyportal 17805 update documentation for i frame task templa…
Browse files Browse the repository at this point in the history 
…te configuration (#1285)

* document/IVYPORTAL-17805-Update-documentation-for-IFrame-task-template-configuration
_ update document in code
_ update document
  • Loading branch information
@nhthinh-axonivy
nhthinh-axonivy authored Dec 5, 2024
1 parent e45b686 commit 3133e10
Show file tree
Hide file tree
Showing 2 changed files with 252 additions and 118 deletions.
140 changes: 79 additions & 61 deletions AxonIvyPortal/portal/webContent/layouts/restricted/IFrameTaskTemplate.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,69 +9,87 @@
<!-- THIS TEMPLATE IS ONLY USED BY PORTAL. DON'T USE IT. -->
<!-- Follow the comments to know how to pass the params in your HTML dialog to Portal area outside IFrame. -->

<!-- Available params in this template: -->
<!-- taskName: Custom text for task name -->
<!-- taskIcon: Task icon to be displayed, using Streamline or Awesome font, e.g., `si si-arrow-right` -->
<!-- isHideTaskName: Hide task name, false (default) or true -->
<!-- caseId: ID of case to be displayed in case information dialog -->
<!-- isHideCaseInfo: Hide `Show Information` button, false (default) or true -->
<!-- currentProcessStep: Current process step, could be the index of the step or the step name -->
<!-- processSteps: List of process steps, e.g., `[&quot;Create Investment Request&quot;, &quot;Approve Investment Reques&quot;]` -->
<!-- or `#{portalComponentUtilsBean.convertToJSON(data.steps)}` -->
<!-- isShowAllSteps: Shows all steps on large screens, false (default) or true -->
<!-- processChainDirection: VERTICAL or HORIZONTAL (default) -->
<!-- processChainShape: LINE or CIRCLE (default) -->
<!-- isHideTaskAction: Hide task action button, false (default) or true -->
<!-- isWorkingOnATask: Working on a task in order to display warning when leaving page, false or true (default) -->
<!-- announcementInvisible: Make announcement invisible, false or true (default) -->
<!-- isCardFrame: Display content of the IFrame inside a card style -->
<!-- viewName: Custom breadcrum, value could be HOME, PROCESS, TASK, TASK_DETAIL, CASE_DETAIL, CASE, TECHNICAL_CASE, RELATED_TASK, USER_PROFILE, -->
<!-- ABSENCES_MANAGEMENT, DASHBOARD_CONFIGURATION, EDIT_DASHBOARD_DETAILS, PROCESS_VIEWER, PORTAL_MANAGEMENT, NOTIFICATION -->
<!-- Template Parameters -->
<!--
The following parameters are available for this template:
<!-- You could configure UI in either of these two ways -->
<!-- 1. Using component IFrameTaskConfig, this way is recommended -->
<!-- <ic:com.axonivy.portal.components.IFrameTaskConfig -->
<!-- taskName="Approve Investment" -->
<!-- taskIcon="si si-bulb" -->
<!-- isHideTaskName="false" -->
<!-- caseId="123456" -->
<!-- isHideCaseInfo="false" -->
<!-- currentProcessStep="0" -->
<!-- processSteps='["Create Investment Request", "Approve Investment Request"]' -->
<!-- isShowAllSteps="true" -->
<!-- processChainDirection="VERTICAL" -->
<!-- processChainShape="LINE" -->
<!-- isHideTaskAction="true" -->
<!-- isWorkingOnATask="false" -->
<!-- announcementInvisible="false" -->
<!-- isCardFrame="true" -->
<!-- viewName="TASK_DETAIL" -->
<!-- /> -->
**Task Details:**
- taskName: (String) Custom text for the task name.
- taskIcon: (String) Icon for the task, using Streamline or Awesome font (e.g., `si si-arrow-right`).
- isHideTaskName: (Boolean) Hides the task name when true. Default is false.
**Case Information:**
- caseId: (String) ID of the case to be displayed in the case information dialog.
- isHideCaseInfo: (Boolean) Hides the `Show Information` button when true. Default is false.
**Process Steps:**
- currentProcessStep: (Number/String) Current step in the process, either as an index or step name.
- processSteps: (Array/String) List of process steps (e.g., `["Create Investment Request", "Approve Investment Request"]`)
or JSON (e.g., `#{portalComponentUtilsBean.convertToJSON(data.steps)}`).
- isShowAllSteps: (Boolean) Displays all steps on large screens when true. Default is false.
- processChainDirection: (String) Orientation of the process chain, either `VERTICAL` or `HORIZONTAL` (default).
- processChainShape: (String) Shape of the process chain, either `LINE` or `CIRCLE` (default).
**Task Actions:**
- isHideTaskAction: (Boolean) Hides the task action button when true. Default is false.
- isWorkingOnATask: (Boolean) Indicates if a task is currently being worked on, useful for displaying a warning when leaving the page. Default is true.
**Miscellaneous:**
- announcementInvisible: (Boolean) Makes the announcement invisible when true. Default is false.
- isCardFrame: (Boolean) Displays content of the IFrame inside a card-style container when true.
- viewName: (String) Defines a custom breadcrumb view. Possible values:
`HOME, PROCESS, TASK, TASK_DETAIL, CASE_DETAIL, CASE, TECHNICAL_CASE, RELATED_TASK, USER_PROFILE,
ABSENCES_MANAGEMENT, DASHBOARD_CONFIGURATION, EDIT_DASHBOARD_DETAILS, PROCESS_VIEWER, PORTAL_MANAGEMENT, NOTIFICATION`.
-->

<!-- Configuration Options -->
<!--
The UI can be configured using one of the following methods:
**1. Component-Based Configuration (Recommended):**
Example:
<ic:com.axonivy.portal.components.IFrameTaskConfig
taskName="Approve Investment"
taskIcon="si si-bulb"
isHideTaskName="false"
caseId="123456"
isHideCaseInfo="false"
currentProcessStep="0"
processSteps='["Create Investment Request", "Approve Investment Request"]'
isShowAllSteps="true"
processChainDirection="VERTICAL"
processChainShape="LINE"
isHideTaskAction="true"
isWorkingOnATask="false"
announcementInvisible="false"
isCardFrame="true"
viewName="TASK_DETAIL"
/>
**2. JavaScript-Based Configuration:**
Example:
<script>
window.taskName = "Approve Investment";
window.taskIcon = "si si-bulb";
window.isHideTaskName = false;
window.caseId = "123456";
window.isHideCaseInfo = false;
window.currentProcessStep = 0;
window.processSteps = ["Create Investment Request", "Approve Investment Request"];
// Convert Java List of steps to JSON format if needed:
window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
window.isShowAllSteps = true;
window.processChainDirection = "VERTICAL";
window.processChainShape = "LINE";
window.isHideTaskAction = false;
window.isWorkingOnATask = false;
window.announcementInvisible = false;
window.isCardFrame = true;
window.viewName = "TASK_DETAIL";
</script>
-->

<!-- 2. Using Javascript -->
<!-- <script> -->
<!-- window.taskName = "Approve Investment"; -->
<!-- window.taskIcon = "si bulb"; -->
<!-- window.isHideTaskName = false; -->
<!-- window.caseId = "123456"; -->
<!-- window.isHideCaseInfo = false; -->
<!-- window.currentProcessStep = 0; -->
<!-- window.currentProcessStep = #{data.currentProcessStep}; -->
<!-- window.currentProcessStep = "#{data.currentProcessStep}"; -->
<!-- // Set process steps directly as Array. -->
<!-- window.processSteps = ["Create Investment Request", "Approve Investment Request"]; -->
<!-- // If process steps are set in HTML dialog logic or java code, convert it to JSON format -->
<!-- // Use this code if process steps are a java String list -->
<!-- window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)}; -->
<!-- window.isShowAllSteps = true; -->
<!-- window.processChainDirection = "VERTICAL"; -->
<!-- window.processChainShape = "LINE"; -->
<!-- window.isHideTaskAction = false; -->
<!-- window.isWorkingOnATask = false; -->
<!-- window.announcementInvisible = false; -->
<!-- window.isCardFrame = true; -->
<!-- window.viewName = TASK_DETAIL; -->
<!-- </script> -->

<ui:param name="contentContainerStyleClass" value="task-frame-container js-task-frame-container" />
<ui:param name="layoutContentStyleClass" value="frame-container" />
Expand Down
Loading

0 comments on commit 3133e10

Please sign in to comment.