Run custom app without opening sidebar?

[Brian_Frank]

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?

[Justin_Barrett]

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.

[Brian_Frank]

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?

[Justin_Barrett]

Brian_Frank:

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?

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?

[Kamille_Parks]

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.

[Brian_Frank]

Thanks @Kamille_Parks! I’m looking into the viewport documentation, but just to clarify…

1. You mention it’s possible to control the size of a custom app. Does that mean I can explicitly set the size and thereby prevent the app from entering fullscreen? Or are all custom apps by default forced into fullscreen mode when you have a record expanded?
2. I’m unclear on your comment that you can’t determine that a button was clicked from the expanded record view vs. the grid. I have a button field that opens my custom app, and it doesn’t seem to matter whether you click the button in an expanded record or in the grid (the only difference being, as implied above, that doing so from within an expanded record automatically forces the app into fullscreen mode).

For reference, I have some of my code pasted in this thread.

[Kamille_Parks · Accepted solution]

Brian_Frank:

are all custom apps by default forced into fullscreen mode when you have a record expanded?

Yes.

Brian_Frank:

it doesn’t seem to matter whether you click the button in an expanded record or in the grid

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.

[Brian_Frank]

@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>
        )
    }