Upcoming database upgrades. to improve our reliability at 03:30 UTC on Feb. 25 / 7:30pm PT on Feb. 24. Some users may briefly experience slow load times or error messages. Learn more here

Example: Netflix-style UI with a script

Topic Labels: Scripting extentions
7035 1
Showing results for 
Search instead for 
Did you mean: 



Add a scripting block with the following script:

// Get an API key from OMDB here:

// Shows all the button groups together and waits for a button click
// Returns the first button that was clicked
async function chooseFromButtonGroups(label, buttonGroups) {
    output.markdown(`## ${label}`);
    return await Promise.race([label, options]) =>
        input.buttonsAsync(label, options)

async function addTitle(title) {
    const info = await fetch(`${title}&apikey=${OMDB_API_KEY}`);
    const { Title, Runtime, Plot, Poster } = await info.json();

# ${Title}
Runtime: \`${Runtime}\`

    const table = base.getTable('To watch');
    await table.createRecordAsync({
        'Name': Title,
        'Notes': Plot,
        'Attachments': [{
            url: Poster,
            filename: `${Title}.png`,

const title = await chooseFromButtonGroups('What would you like to watch next?', [
    ['TV Comedies', ['The Office', 'Parks and Recreation', 'Frasier']],
    ['British TV Shows', ['Great British Baking Show', 'Taskmaster']],
    ['Continue Watching', ['Jeopardy!', 'The West Wing']],


await addTitle(title);


Image 2020-02-11 at 3.32.50 PM
Image 2020-02-11 at 3.33.46 PM

You should see rows of buttons with TV shows in different categories. Clicking on one should fetch the description and poster from OMDB and insert a new record into the table.

1 Reply 1

Figured out how to print the images from database links

let keyTable = base.getTable(“To watch”);
let keyQuery = await keyTable.selectRecordsAsync();
let keyVisualizerLookup = {}

for (let keyRecord of keyQuery.records) {
let keyName = keyRecord.getCellValue(“Name”)
let keyImage = keyRecord.getCellValue(‘Attachments’)[0][‘url’];