Save the date! Join us on October 16 for our Product Ops launch event. Register here.
Jun 24, 2021 05:54 PM
I have a custom solution that automates adding a linked record and auto-filling some fields, and the app is wired to a button. Every time the button is pressed, the sidebar opens to the app. I imagine this is totally expected behavior, and desirable for most custom app implementations, but is there any way to get the app to run “in the background” without opening the sidebar? I’ve noticed, for instance, that if someone clicks the button from the expanded record view, rather than directly from the grid, the sidebar goes full screen and my user testing shows people are getting confused by this takeover and having trouble finding their way back to their original context. Can we just prevent the sidebar from opening somehow?
Solved! Go to Solution.
Jun 28, 2021 03:33 PM
Yes.
Correct. What I’m saying is there is no way to say “if someone clicked the button when the record was expanded, do x”
The closest thing to what you’re asking is telling the app to exit full screen every time it enters full screen.
Jun 26, 2021 10:16 PM
At this time, there’s no way to prevent the sidebar from opening when a script app is triggered. An alternate way to approach this is to use an automation that runs a script action. While automations can’t be triggered by buttons (yet…no idea if this will ever be a thing, but I’m saying “yet” just in case it comes to pass in the future), they can be triggered by things like the change in state of a checkbox or single select field. The former is a similar one-click option like a button, while the latter requires an extra click. In either case, the sidebar stays closed, and the automation can reset the state of the triggering field so that it’s ready for reuse later if necessary.
Jun 28, 2021 09:42 AM
This is helpful, thanks. In my use case, I can’t get the newly created record to expand automatically without using the Blocks SDK, as far as I know.
In fact, I don’t think the sidebar opening is distracting in the Grid view. Unfortunately, if a user is in an expanded record view (i.e. any time you open a record from calendar, kanban, etc.), the custom app goes full screen underneath the expanded record. This is a much more dramatic context switch and confused a lot of folks in my user testing. As a compromise, I’m wondering if there’s a way to control the custom app display. Is full screen the only possible display option for a custom app when run from an expanded record? Or can the app be given a maximum width so it is prevented from going full screen?
Jun 28, 2021 01:38 PM
I wish I could help, but I’m still fairly new to custom app design and display features (and to be transparent, I was confused when reading your original post and thought you were talking about a custom script in the Scripting app, not an actual custom app). Maybe @kuovonne or @Kamille_Parks can shed some light on this?
Jun 28, 2021 01:46 PM
You have some control over the size of a custom app, and it is possible to force it out of fullscreen using the Viewport model: Airtable Blocks SDK
You would not be able to determine that a button was clicked from the expanded record view vs in the grid, but you should be able (as part of a callback tied to a change in button data) to force the app out of full screen.
Jun 28, 2021 02:34 PM
Thanks @Kamille_Parks! I’m looking into the viewport documentation, but just to clarify…
For reference, I have some of my code pasted in this thread.
Jun 28, 2021 03:33 PM
Yes.
Correct. What I’m saying is there is no way to say “if someone clicked the button when the record was expanded, do x”
The closest thing to what you’re asking is telling the app to exit full screen every time it enters full screen.
Jun 28, 2021 06:38 PM
@Kamille_Parks I’ve ALMOST got a suitable compromise working. To create a consistent UX whether the user is in grid or expanded record views, I call viewport.enterFullScreenIfPossible if it’s not already in full screen. This way there’s a loading graphic and full screen takeover no matter which context the user is in when they hit the button (encouraging them to wait a sec before trying to interact with the record more). Then, once the new linked record is created and expanded, I call viewport.exitFullScreen.
In both cases, clicking the button successfully creates and opens a new record on top of the current view, and then minimizes the custom app if it’s still full screen.
HOWEVER, I’m getting an error when clicking the button/initiating the app from within an expanded record, and it’s preventing the app from correctly reporting back with my success message (even though the task executed fine):
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://block--ppowv-t-p7-h7-gfm-g--oy30tqr.airtableblocks.com') does not match the recipient window's origin ('https://airtable.com').
Here’s the code:
...
} else {
useEffect(() => {
const createSource = async () => {
setSource(null);
setIsLoading(true);
!(viewport.isFullscreen) && viewport.enterFullscreenIfPossible();
const newRecordID = await sourceTable.createRecordAsync(updateFields);
const newSourceQuery = await sourceTable.selectRecordsAsync();
const newSource = newSourceQuery.getRecordById(newRecordID);
setIsLoading(false);
setSource(newSource.name);
expandRecord(newSource);
viewport.isFullscreen && viewport.exitFullscreen();
}
createSource();
}, [data]);
return (
<Box padding={3}>
{ isLoading &&
<Loader scale={0.5} />
}
{ source &&
<div>
<p>New source created: {source}.</p>
<p>Click the "New Source" button in an assignment record to add another source.</p>
</div>
}
</Box>
)
}