How to dynamically display record details?

API & Custom Code Ask Developers
6

@JDWorleyKY ChatGPT doesn’t always have the context, and sometimes complicates it more unfortunately!

Here’s a simpler solution. In my example, I get the connected record’s phone and email values and add them to other field inputs on the same form. You may want to display them somewhere else, but that’s up to you!

It would be too wordy to detail the step-by-step on how to install, but here’s a summary:

  • It loads the Knack API Helper library for a simplified view-based API call (credit to Callum Boase)
  • On render of view_xx form:
    • Detect change of selection to field_aa connection field
    • Get the Patient record from a scene_xx/view_yy details view that the logged-in user can access
    • Update field_bb/field_cc with values from field_xx/field_yy

Please message me privately if you’d like some help installing!

FillFieldsFromConnection

loadExternalFiles([
  { type: 'script', module: false, url: 'https://cdn.jsdelivr.net/npm/knack-api-helper@latest/browser.js' }, // Knack API Helper - https://socket.dev/npm/package/knack-api-helper
]);

$(document).on(`knack-view-render.view_xx`, async function (event, view, data) {

  const patientField = 'field_aa';
  
  // When the connection value changes...
  $(`#${view.key}-${patientField}`).on('change', async function() {
    const recordId = $(this).val(); // Get the selected record ID
    if (recordId) { // If a selection is made...
      const record = await KnackAPI.makeRequest('get', {scene: 'scene_xx', view: 'view_yy', recordId: recordId}); // Get the patient record
      // Update the form field inputs with new values
      $(`#${view.key} #field_bb`).val(record?.field_xx_raw?.email || ''); // Email
      $(`#${view.key} #field_cc`).val(record?.field_yy_raw?.number || ''); // Phone
    }
  });

});

//Generic helper function to loader external JS and CSS files before your Knack app finishes loading
function loadExternalFiles(externalFiles) {
// Insert code from here: https://app.lowcodemastery.com/#resource-public-view/66033c6ac88da60027fec12b/
}
3 Likes