Refreshing a details view

Ask the Community Get Answers
1

I’m really confused. I have a details view, view_705, which has an action button that writes to a table, and a single rich text field from the same table.

Clicking the action button sets a flag in a different table field, which triggers a flow that request a response from OpenAI. The response takes 5-10 seconds, and gets written into that single rich text field.

After the click, I have a delay of 15 seconds and then I’m using:

Knack.views["view_705"].model.fetch();
Knack.views["view_705"].render();
Knack.views["view_705"].postRender();

to refresh the view, hopefully showing the response from OpenAI.

The refresh doesnt work, but I know it runs because I have console logs sandwiching it.

Any ideas on a better way to refresh the view?

2

A sleep helped. The following works, sort of. Refreshes the view on click, the refreshes it again 20 seconds later (allows plenty of time for OpenAI to respond).

BUT, I cannot for the life of me get a spinner to show between refresh 1 and 2. If you have any suggestions on how to get the spinner to work, or even how to put up a countdown timer, they would be welcomed. 20secs is a log time to look at a screen doing nothing …

3

Able to share the entirety of your code without your API keys @LeighBerre96926 ?

4

No API, just the below:

$(document).on(“click”, “#view_705 .kn-action-link”, function () {
setTimeout(function () {
refreshDetailsView(‘view_705’);
},20000);
refreshDetailsView(‘view_705’);

// A function to refresh a specified details view
function refreshDetailsView(viewKey) {
Knack.views[viewKey].model.fetch();

setTimeout(() => {
Knack.views[viewKey].render();
Knack.views[viewKey].postRender();
}, 2000);
}

});

view_705 is a detail view which only shows 2 fields, the AI Response Text and a date/time the AI Response was written to Knack.

The view also contains an action button “SEND REQUEST TO AI” , which just sets a field called REQUEST API (Y/N) to Y in the table associated with the detail view. It also creates a record in a related table which keeps a copy of whatever is currently in the AI RESPONSE field (as a history of what was received earlier), and clears the AI RESPONSE field.

My flow is triggered by an update to that table where REQUEST API = Y, then it sends my request to OpenAI, and the flow writes the response back to the AI RESPONSE field.

And then the javascript stops it s 20 second countdown and refreshes the view showing the new response from OpenAI.

1 Like
5

With the help of ChatGPT, I have something that works - including showing a countdown timer. Here is the code in case it helps someone else in the future. Note it doesn’t actually open a model - it just shows the countdown on the same page. Which is fine with me as it gets scrubbed out at the end with the refresh.

$(document).on(“click”, “#view_728 .kn-action-link”, function () {
openModalWithCountdown();

// Delay the refresh of details view by 18 seconds (close to the modal closing)
setTimeout(function () {
    refreshDetailsView('view_728');
}, 18000);

// Immediate refresh
refreshDetailsView('view_728');

});

// Function to open modal and start countdown
function openModalWithCountdown() {
// If modal does not exist, create it
if ($(‘#customModal’).length === 0) {
$(‘body’).append( <div id="customModal" class="modal-overlay"> <div class="modal-content"> <h2>Processing...</h2> <p id="countdownTimer">Starting...</p> </div> </div> );
}

// Show the modal
$('#customModal').fadeIn(300);

// Start countdown
let timeLeft = 20;
const timerDisplay = $('#countdownTimer');

function updateTimer() {
    if (timeLeft >= 0) {
        timerDisplay.text(`Time left: ${timeLeft} seconds`);
        timeLeft--;
    } else {
        clearInterval(countdown);
        $('#customModal').fadeOut(300); // Close the modal
    }
}

updateTimer();
const countdown = setInterval(updateTimer, 1000);

}

// Function to refresh a specified details view
function refreshDetailsView(viewKey) {
Knack.views[viewKey].model.fetch();
setTimeout(() => {
Knack.views[viewKey].render();
Knack.views[viewKey].postRender();
}, 2000);
}

I also have this CSS to make the timer text H1 size:

#countdownTimer {
all: unset;
display: block;
font-size: 2.5rem;
font-weight: bold;
text-align: center;
}

1 Like