Auto Refresh the Finance Service Request form page when new jobs are added

[ChristinaTremel]

When submitting new jobs on a Service Request, the job information shows up under all of the Service Request job tables until the page is refreshed. Can we auto refresh the page when a user clicks "Add Job"?

• [x] NEED TO TEST: On Add job form, change form submission rules. Test go to parent or custom DEV work?

[ChristinaTremel]

@ChrispinP could you provide details on how you've addressed auto refreshing pages in the past?

[ChrispinP]

Sent code to Christina & Diana for review

[dianamartin]

7/31

• [x] Created Finance TEST environment
• [ ] Need to test code in TEST environment to see if it works on that page

[dianamartin]

9/11

We are testing the code that Chrispin shared with us and the Street Banners.

These are the values for the pages we need the code applied to:

New Service Request | BRAND NEW SR

• Scene scene_431
• View view_1020

Add/Edit Service Request | REQUESTER

• Scene scene_364
• View view_1045

New Service Request | ADMIN

• Scene scene_433
• View view_1134

Page Refresh with the button on a Table view

/*****************************/
/*** Refresh Table Button ***/
/*****************************/
$(document).on("knack-view-render.view_322", function (event, page) {
  var button = $(
    "<span style='width: 2em'></span>" +
    "<button id='refresh-view_322' style='border-radius: .35em' class='kn-button is-primary'>" +
    "<i class='fa fa-refresh'></i>" +
    "<span style='width: .5em'></span>Refresh Table</button>"
  );

  button.insertAfter( //places button next to keyword search option
    $("#view_322").find("form.table-keyword-search").find("a")[0]
  );

  $("#refresh-view_322").click(function (e) {
    e.preventdefault();
    Knack.views["view_322"].model.fetch();
  });
});

Auto-Submitting a Form view:

$(document).on('knack-scene-render.scene_446', function(event, scene) {
    $('button[type=submit]').submit();
});

Street Banner Code - when a user selects a value and clicks the submit button

// Reload LPB Application when Design Ready "Yes"
$(document).on("knack-scene-render.scene_1212", function () {
  $('#view_3392 .kn-link:contains("Yes")').on("click", function(){
    location.reload();
  })
});

// Reload OTS Application when Design Ready "Yes"
$(document).on("knack-scene-render.scene_1234", function () {
  $('#view_3397 .kn-link:contains("Yes")').on("click", function(){
    location.reload();
  })

[dianamartin]

The Issue

• User creates a new job form and submits a record
• Form refreshes and it gets added to it's respective table (ex. TK)
• Have several tables on the page that the records appears on.
  • Tables are filtered by category (ex. Subprojects, FDU, TK, JV, EIT, Other)
• Additional step, manual refresh the browser so the page refreshes
• Several tables finally update and only appear on the respective table.

Proposed

• User creates a new job form and submits a record (ex. TK)
• Form refreshes, the page is auto-refreshed
• Records is added to it's respective table only (ex. TK)
  • The other tables don't show the record on all the tables (untouched)

Steps to Recreate Issue

• Navigate to "All Services Requests" page, Open "Not Submitted" record
• Click Details icon
• Add | Edit Service Request Job button
• Select "Job Type" - TK
• Select "Task Action | TK" - Increase
• Type in 1125, select an existing TK
• Type in amount (ex. $10.00)
• Click Save Job

[ChristinaTremel]

John recommended we try this code:

  $("#refresh-view_322").click(function (e) {
    e.preventdefault();
    Knack.views["view_322"].model.fetch();
  });
});

[johnclary]

I mentioned this grooming—if you want to try testing again by running this line in the javacsript console in your browser:

Knack.views["<view_id>"].model.fetch();

You should replace <view_id> with the view ID of the table you want to refresh. Hopefully that works!

[dianamartin]

9/14

• In TEST | JUL 25 2023 - Finance and Purchasing System
• tested code and still doesn't work :(

[chiaberry]

I am going to look into this!

[chiaberry]

I have code in test app but this is what I found to work:

var viewsToFetch = ["view_1070", "view_1067", "view_1065", "view_1060", "view_1057"]
// When the form in view 1045 has been submitted, refetch the views
$(document).on("knack-form-submit.view_1045", function (event, view, data) {
    viewsToFetch.forEach(view => Knack.views[view].model.fetch())
})

[ChristinaTremel]

@chiaberry Thank you! I just tested that form in the test app and that code seems to be working. 🙏🏼 I'll sync with Diana early next week to test it out again/implement it in the prod app.

[ChristinaTremel]

Had to update the code to include Subprojects, but this code worked in test 🎉

var viewsToFetch = ["view_1070", "view_1067", "view_1065", "view_1060", "view_1057", "view_1056]
// When the form in view 1045 has been submitted, refetch the views
$(document).on("knack-form-submit.view_1045", function (event, view, data) {
    viewsToFetch.forEach(view => Knack.views[view].model.fetch())
})

Need to identify views in production, but then we're ready to implement!

[dianamartin]

1/24/24

• Subprojects - view_867
• FDU - view_865
• TK - view_870
• BGEX - view_857
• JV - view_1062
• IET - view_1061
• Other - view_1068

Updated Prod Code

var viewsToFetch = ["view_867", "view_865", "view_870", "view_857", "view_1062", "view_1061", "view_1068"]
// When the form in view 1045 has been submitted, refetch the views
$(document).on("knack-form-submit.view_1045", function (event, view, data) {
    viewsToFetch.forEach(view => Knack.views[view].model.fetch())
})

[dianamartin]

6/14/24

Initial Creation - Add Job - 1020

Subprojects - view_1161 FDUs - view_1162 TK - view_1163 JV - view_1165 IET - view_1166 Other - view_1167

Requester Details - Add Job - 1181

Subprojects - view_867 FDU - view_865 TK - view_870 JV - view_1062 IET - view_1061 Other - view_1068

Manage SRs - Add Job - 1182

Subprojects - view_1183 FDU - view_1191 TK - view_1185 JV - view_1186 IET - view_1187 Other - view_1188

Add FDU to Mange SRs - Add Job page

• copied editable table from Requester Details - Add Job

[ChristinaTremel]

Code for Initial Creation - Add Job

var viewsToFetch = ["view_1161", "view_1162", "view_1165", "view_1163", "view_1166", "view_1167"]
// When the form in view 1020 has been submitted, refetch the views
$(document).on("knack-form-submit.view_1020", function (event, view, data) {
    viewsToFetch.forEach(view => Knack.views[view].model.fetch())
})

Code for Requester Details - Add Job

var viewsToFetchUserAdd = ["view_867", "view_865", "view_870", "view_1062", "view_1061", "view_1068"]
// When the form in view 1181 has been submitted, refetch the views
$(document).on("knack-form-submit.view_1181", function (event, view, data) {
    viewsToFetchUserAdd.forEach(view => Knack.views[view].model.fetch())
})

Code for Admin - Add Job

var viewsToFetchAdmin = ["view_1183, "view_1191", "view_1185", "view_1186", "view_1187", "view_1188"]
// When the form in view 1182 has been submitted, refetch the views
$(document).on("knack-form-submit.view_1182", function (event, view, data) {
    viewsToFetchAdmin.forEach(view => Knack.views[view].model.fetch())
})

[ChristinaTremel]

Chia helped us fix the code by renaming the viewstofetch for each page we were refreshing. Diana and I tested and this works ✅

Still need to do PR @dianamartin

[dianamartin]

7/12/24

• [x] Created PR 159 on 7/11/24
• [x] Merged PR