Help

Save the date! Join us on October 16 for our Product Ops launch event. Register here.

Example: Netflix-style UI with a script

Topic Labels: Scripting extentions
8907 1
cancel
Showing results for 
Search instead for 
Did you mean: 
Shrey_Banga
6 - Interface Innovator
6 - Interface Innovator

Setup

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

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
Lisa_Hagan
4 - Data Explorer
4 - Data Explorer

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(`

${keyName}
`);
}