Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IVYPORTAL-17805 Update documentation for IFrame task template configuration #1285

Merged
merged 9 commits into from
Dec 5, 2024
Merged

IVYPORTAL-17805 Update documentation for IFrame task template configuration #1285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a9e01a8
document/IVYPORTAL-17805-Update-documentation-for-IFrame-task-templat…
nhthinh-axonivy Nov 28, 2024
3d10251
document/IVYPORTAL-17805-Update-documentation-for-IFrame-task-templat…
nhthinh-axonivy Nov 29, 2024
f5a1b1b
document/IVYPORTAL-17805-Update-documentation-for-IFrame-task-templat…
nhthinh-axonivy Nov 29, 2024
8b8571c
document/IVYPORTAL-17805-Update-documentation-for-IFrame-task-templat…
nhthinh-axonivy Nov 29, 2024
74a42e6
document/IVYPORTAL-17805-Update-documentation-for-IFrame-task-templat…
nhthinh-axonivy Nov 29, 2024
211ab01
document/IVYPORTAL-17805-Update-documentation-for-IFrame-task-templat…
nhthinh-axonivy Nov 29, 2024
9e16c2f
document/IVYPORTAL-17805-Update-documentation-for-IFrame-task-templat…
nhthinh-axonivy Nov 29, 2024
2b634cb
document/IVYPORTAL-17805-Update-documentation-for-IFrame-task-templat…
nhthinh-axonivy Nov 29, 2024
2417724
Update index.rst
nhthinh-axonivy Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 79 additions & 61 deletions AxonIvyPortal/portal/webContent/layouts/restricted/IFrameTaskTemplate.xhtml
View file
Open in desktop
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
Loading