afterUpdate collection updates only temporary

I have a simple test site with one collection. The collection has 3 fields relevant to this question: speaker1Name (text), speaker2Name (text) and allSpeakers (rich text).

There is a collection hook setup as an afterUpdate that combines the text from the two text fields into a list in the allSpeakers field. The hook code works, but there is a strange behavior noted.

Using the wix editor UI to modify the database fields for either speaker1 or 2 text fields, the hook updates the allSpeakers field if that field is opened for editing to “get” the field contents into the rich text editor.

Problem: If the database is reloaded by clicking on the collection name in the Wix UI, the updated value in allSpeakers is reverted to an older copy of the collection.

Another strange behavior: sometimes if many edits are made in the test records using the Wix UI, some of the allSpeaker fields with the “afterUpdate” value becomes updated with the correct data from the two source fields. However, if one of those source fields are changed, the allSpeaker field is now stuck with historical values from prior edits.

Questions:

  1. Why is the data only temporarily showing up in the UI?
  2. Is a “post” needed to write it to the DB?

Here is a copy of the code from the test site https://www.wix.com/my-account/sites/#/415a2d53-4b52-4578-822b-12bbf5e85042/site-settings/domain?referrer=overview

export function Programs_afterUpdate(item, context) {
const s1Name = item.speaker1Name;
const s2Name = item.speaker2Name;
const s1Topic = item.speaker1Subject;
const s2Topic = item.speaker2Topic;
let allNames = “”;
let allTopics = “”;

if (s1Name) { // check if the speaker1Name is not null 
	allNames = "<ul><li><p>" + item.speaker1Name; // replace allSpeakers with speaker1name 
	if (s1Topic) { // if speaker 1 topic is not null 
		allTopics = "<ul><li><p>" + item.speaker1Subject; 
	} else { 
		allTopics = "<ul><li><p>" + "To Be Assigned"; 
	} 
} else { // add speaker1name to the var to build the all speakers list and set a var to check 
	allNames = ""; // replace allSpeakers with null 
	allTopics = ""; // replace topics with null 
} 
const topics = (item.topics); 
if (s2Name) { // check speaker2Name 
	
	allNames = allNames + "</p></li><li><p>" + item.speaker2Name + "</p></li></ul>"; 
	if (s2Topic && topics) { 
		allTopics = allTopics + "</p></li>t<li><p>" + item.speaker2Topic + "</p></li></ul>"; 
	} else { 
		allTopics = allTopics + "</p></li><li><p>" + "To Be Assigned" + "</p></li></ul>"; 
	} 
} else { // for now don't add anything else to allspeakers and topics for speaker two. 
	// placeholder for adding additional speakers 
	//  
} 

item.allSpeakers = allNames; 
item.topics = allTopics; 

return item; 

To test one theory about changing the collection directly through the Wix dev UI and possibly not having a post occur, I added a new form that has R/W input fields for the two text fields and a display object for the rich text field. Then added a submit button to do do the post.
The same problem occurs where the allSpeakers field appears with the updated changes in the text field after the submit button. However if the page is closed (back to editor) and (preview) is used to reload the record, the updates done by afterUpdate code above are reverted to a previous edit. Very strange.
Any ideas would be appreciated.

Hi Kevin,
it seems you are using the wrong hook for what you are trying to achieve.
an afterUpdate hook fires after the data has been saved to the collection, and hence affects only the values that return to the browser.

instead, try using the beforeUpdate hook.
this hooks allows you to modify the data before it’s written to the collection.

give it a try and let us know how it went.

good luck!

You are correct! Changing to “before” solved the problem. Thanks!