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:

1. Navigate to the Work Order page.
2. Click your User Profile.
3. Select Edit page in Visual Builder Studio in the Administration section.
4. Log on to VSB.
5. Enter a project name and click Create.
6. In VBS, navigate to WO detail page by expanding Oracle CX Service UI Extension App > Service > fieldsvc > detail.
7. Click the Detail tab.
8. Click the Structure tab.
9. In the HTML DOM structure, select containerLayout1.
10. You'll see the layout structure in the properties panel.
11. Create a duplicate layout for the container layout.
12. Rename case1 to case2.
13. Click the add icon and add a new section called NewAttachments.
14. Use the up arrow to move the NewAttachments section and place it below the PartsSummaryTemplate.
15. Remove the old AttachmentTemplate section by clicking the delete button next to it.
16. Click the new NewAttachments section to open it.
17. Add the oj-collapsible components to the section template.
18. Add the Attachment component.
19. 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>

20. 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;
    });

21. Add a new variable attachmentsEndpointParams1 of the object type with the following code:

    {
        "customerWorkOrders_Id": "[[$functions.getWoNumber($base.variables.NewWO)]]"
    }

22. Add the following code to the translation bundle detail-page-x.json:

    "translations": {
       "fsvc": {
         "path": "faResourceBundle/nls/oracle.apps.crm.service.fieldservice.resource"
       }
     }

23. Preview the changes before saving.