Data Refresh Behind Card Modal

Support
1

I’m trying to create/edit records in an array using a card modal, this has a next button so the user can easily navigate through and add new records without closing the modal. I was trying to work out if there is a way of refreshing the data model for the page behind the modal to reflect the changes being made every time a record is saved or created without having to close the modal first.

2

That should be possible… in the onFormLoad of the main page create a function like

window.receiveModalUpdate(id, update) { // use the id to find the right place in model, then apply update }

Then in your modal, when the user clicks submit, or next, add in a JS call to that function. If the id you pass is the key to the place in the model then you ca set the update object in its place in your model, e.g. model.record[id] = update.

1 Like
3

I think that would work but a recent change in BF has each windows model centrally stored in the store.

I am away from computer but you can access it via something like:
vueapp.store.window[0]

Names may be off

4

This is the path I managed to find using console: vueapp.$store._vm._data.$$state.wndw.windows[0].formSchema.model Not sure if this is the shortest path but it does navigate to the model and changes made there do affect the page behind the modal.

1 Like
5

The best path is

vueapp.$store.state.wndw.windows[0].formSchema.model

I think we could add a BF function to make grabbing this easy.

we have already added others as seen here:

6

Would something similar allow me to call a named action or utility hook that exists in the main page, in my case run the named action that refreshes the records?

7

No, but this would be interesting.

Currently actions are like FM scripts, they run in the context of the active window ( so a modal if there is one )

But, really if you want to do something like a save of the background data, what we do is run a save hook from the modal saving the current object and then also push the updated data into the parent ( background) without a save since its really already saved

That accomplishes the same thing.

c

c

8

I use a bounce page that calls a named action to return to the original page, this updates the original page in the background behind the modal very nicely. Probably a rookie method.

9

@snickurz Can you explain a little more on how this works?

10

I will try:

  • I have a blank page with slug /bounce

  • I have a hookset named “bounce”

  • My parent table is populated with records that were assigned a sequence number during initial find in FM

  • onRowclick trigers the card modal and passes the record ID and sequence number as query

  • Modal is loaded with single record…modal button group is “close” and “Save”

  • Close closes the modal without saving any changes to visible record

  • Save runs utility hook (type = “save”) …does not close card modal.

  • Utility hook fires and saves changes to record…then calls BF_Action_path (/bounce)

  • The empty bounce page is set to run onformrequest hook

  • onFormrequest has a single BF_Action_path /parent

  • With card modal still open, the background(parent table) goes blank and then reloads with updated record changes.

I am still working on the sequencing part so as to be able to populate the card modal by selecting previous or next. I am thinking I will have to make a static duplicate of the original parent table model in the app for referencing sequence numbers.

1 Like
11

Thanks for this Nick, This is super creative and takes advantage of the fact a modal can persist while the base page and ‘path’ change and come back.

I love how developers create solutions to problems in totally different ways.

Brilliant.

For Next and Prev buttons, you can do a few things, pass the entire array from the parent to the app model and loop through those.

Also @MJ-APJ If you are viewing the parent array via HTML and v-for then point that to the app.myTable and change that from the modal since they both can see that. … yet another solution.