Example: Netflix-style UI with a script

[Shrey_Banga]

Setup

• Create a table called “To watch”. Keep the default fields (Name, Notes and Attachments)
• Get an OMDB API key: http://www.omdbapi.com/apikey.aspx

Script

Add a scripting block with the following script:

// Get an API key from OMDB here: http://www.omdbapi.com/apikey.aspx
const OMDB_API_KEY = 'YOUR_API_KEY';

// 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(buttonGroups.map(([label, options]) =>
        input.buttonsAsync(label, options)
    ));
}

async function addTitle(title) {
    const info = await fetch(`https://www.omdbapi.com/?t=${title}&apikey=${OMDB_API_KEY}`);
    const { Title, Runtime, Plot, Poster } = await info.json();

    output.markdown(`
![${Title}](${Poster})
# ${Title}
${Plot}
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']],
]);

output.clear();

await addTitle(title);

Output

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.

[Lisa_Hagan]

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’];

output.text(keyName)

output.markdown(`

`);
}