How do I update the attachment component in the work order edit page?
Follow these steps to update the attachment component in the work order.
To use the oj-sp-attachments component (used in the SR), instead
of using the oj-sp-attachments-simple component (used in the work
order edit/detail page), follow these steps:
- Navigate to the Work Order page.
- Click your User Profile.
- Select Edit page in Visual Builder Studio in the Administration section.
- Log on to VSB.
- Enter a project name and click Create.
- In VBS, navigate to WO detail page by expanding
Oracle CX Service UI Extension App > Service > fieldsvc > detail
. - Click the Detail tab.
- Click the Structure tab.
- In the HTML DOM structure, select containerLayout1.
- You'll see the layout structure in the properties panel.
- Create a duplicate layout for the container layout.
- Rename case1 to case2.
- Click the add icon and add a new section called NewAttachments.
- Use the up arrow to move the NewAttachments section and place it below the PartsSummaryTemplate.
- Remove the old AttachmentTemplate section by clicking the delete button next to it.
- Click the new NewAttachments section to open it.
- Add the oj-collapsible components to the section template.
- Add the Attachment component.
- Add the following code within the
template:
<oj-collapsible> <div slot="header" class="oj-typography-heading-xs oj-sm-padding-3x-bottom"> <span tabindex="0"> <oj-bind-text value="[[$translations.fsvc['attachments']]]"> </oj-bind-text> </span> </div> <oj-defer> <oj-sp-attachments class="oj-flex-item oj-sm-12 oj-md-12" category="MISC" view.endpoint="[[ 'oracle_cx_serviceUI:fsRestApiGroup/getall_customerWorkOrders-Attachment' ]]" view.endpoint-params="[[$variables.attachmentsEndpointParams1]]" background-tracker.endpoint="[[ 'oracle_cx_serviceUI:applcoreApi/docTracker']]" background-upload.endpoint="[[ 'oracle_cx_serviceUI:applcoreApi/upload' ]]" create.endpoint="[[ 'oracle_cx_serviceUI:fsRestApiGroup/create_customerWorkOrders-Attachment' ]]" create.endpoint-params="[[$variables.attachmentsEndpointParams1]]" delete.endpoint="[[ 'oracle_cx_serviceUI:fsRestApiGroup/delete_customerWorkOrders-Attachment' ]]" delete.endpoint-params="[[$variables.attachmentsEndpointParams1]]" delete.endpoint-attachment-param-name="customerWorkOrders_Attachment_Id" download.endpoint="[[ 'oracle_cx_serviceUI:fsRestApiGroup/get_customerWorkOrders-Attachment-FileContents' ]]" download.endpoint-params="[[$variables.attachmentsEndpointParams1]]" download.endpoint-attachment-param-name="customerWorkOrders_Attachment_Id" edit.endpoint="[[ 'oracle_cx_serviceUI:fsRestApiGroup/update_customerWorkOrders-Attachment' ]]" edit.endpoint-params="[[$variables.attachmentsEndpointParams1]]" edit.endpoint-attachment-param-name="customerWorkOrders_Attachment_Id" categories.endpoint="[[ 'oracle_cx_serviceUI:applcoreApi/getAttachCategory' ]]" preview.endpoint="[[ 'oracle_cx_serviceUI:fsRestApiGroup/getall_customerWorkOrders-Attachment-AttachmentsPreview' ]]" preview.endpoint-params="[[$variables.attachmentsEndpointParams1]]" preview.endpoint-attachment-param-name="customerWorkOrders_Attachment_Id" display-options.category-for-create="SELECT_REQUIRED" display-options.preview-visibility="[[ 'hidden' ]]" display-options.add-visibility="[[ ($functions.canAddAttachment($application.user.permissions) && $functions.isWoEditFlagEnabled($base.variables.NewWO)) ? 'visible' : 'hidden']]" display-options.remove-visibility="[[ ($functions.canAddAttachment($application.user.permissions) && $functions.isWoEditFlagEnabled($base.variables.NewWO))? 'visible' : 'hidden' ]]" display-options.update-visibility="[[ ($functions.canAddAttachment($application.user.permissions) && $functions.isWoEditFlagEnabled($base.variables.NewWO)) ? 'visible' : 'hidden' ]]" display-options.download-visibility="[[ ($functions.canAddAttachment($application.user.permissions)) ? 'visible' : 'hidden' ]]" display-options.remove = "[[ !($functions.canAddAttachment($application.user.permissions)) || !$functions.canEditWO($application.user.permissions) || !$functions.isWoEditFlagEnabled($base.variables.NewWO)]]" display-options.add = "[[ !($functions.canAddAttachment($application.user.permissions)) || !$functions.canEditWO($application.user.permissions) || !$functions.isWoEditFlagEnabled($base.variables.NewWO)]]" display-options.update = "[[!($functions.canAddAttachment($application.user.permissions)) || !$functions.canEditWO($application.user.permissions) || !$functions.isWoEditFlagEnabled($base.variables.NewWO)]]" display-options.preview = "[[ !($functions.canAddAttachment($application.user.permissions)) ]]" entity-name="SVC_WORK_ORDERS"> </oj-sp-attachments> </oj-defer> </oj-collapsible>
- Add the following code in the detail-page-x.js:
define([], () => { 'use strict'; class PageModule { /** * Method to get the WONumber from CustomerWorkOrder object * @param wo : CustomerWorkOrder object */ getWoNumber(wo) { let woNum; if(wo !== null && wo['@context'] && wo['@context'].key ){ woNum = wo['@context'].key; } return woNum; } /** * Method to get the WONumber from CustomerWorkOrder object * @param wo : CustomerWorkOrder object */ isWoEditFlagEnabled(wo) { let flag = false; if(wo !== null && wo.EditModeFlag ){ flag = wo.EditModeFlag; } return flag; } /** * Method to get check the Add Attachment access * @param permissions */ canAddAttachment(permissions){ return permissions.indexOf('SVC_VBCS_Add_Attachment_Access') > 0 ; } /** * Method to get check the WO Edit access * @param permissions */ canEditWO(permissions){ return permissions.indexOf('SVC_VBCS_Edit_Service_Work_Order_Access') > 0 ; } } return PageModule; });
- Add a new variable attachmentsEndpointParams1 of the object type with the
following code:
{ "customerWorkOrders_Id": "[[$functions.getWoNumber($base.variables.NewWO)]]" }
- Add the following code to the translation bundle
detail-page-x.json:
"translations": { "fsvc": { "path": "faResourceBundle/nls/oracle.apps.crm.service.fieldservice.resource" } }
- Preview the changes before saving.