Skip to main content

Linking between actions

Just as you'd use <a> tags to link between HTML pages, you can use Interval's linking APIs to let users navigate between pages and actions. For example, an action might link each row in a table to an "edit" action, or it could conditionally redirect from one action to another.

There are two components to a link: the action's slug, and an optional params object.

Here's an example of two actions that link to each other:

import Interval, { io, ctx } from "@interval/sdk";

const interval = new Interval({
apiKey: "<YOUR API KEY>", // get an API key at https://interval.com/dashboard/develop/keys
actions: {
// the path to this action is `favorite_color`
favorite_color: async () => {
await io.group([
io.display.markdown(`Choose your favorite color:`),
io.display.link("Blue", {
action: "result",
params: { favoriteColor: "blue" },
}),
io.display.link("Red", {
action: "result",
params: { favoriteColor: "red" },
}),
]);
},
// the path to this action is `result`
result: async () => {
await io.group([
io.display.markdown(`Favorite color is: ${ctx.params.favoriteColor}`),
io.display.link("Go back", {
action: "favorite_color",
}),
]);
},
},
});

Linking within tables‚Äč

The most common use of links in Interval apps is to link to actions from within rows in display.table. Here's an example table that links to Edit & Delete actions for each row, and requires an id param in order to run each of them:

import Interval, { io, ctx } from "@interval/sdk";
import { getUsers, getUser } from "./db";

const interval = new Interval({
apiKey: "<YOUR API KEY>", // get an API key at https://interval.com/dashboard/develop/keys
actions: {
users: async () => {
const data = await getUsers();

await io.display.table("Users", {
data,
rowMenuItems: row => [
{
label: "Edit",
action: "edit_user",
params: { id: row.id },
},
{
label: "Delete",
theme: "danger",
action: "delete_user",
params: { id: row.id },
},
],
});
},
edit_user: async () => {
if (!ctx.params.id) {
throw new Error("Missing required param: id");
}

const user = await getUser(ctx.params.id);

// ...
},
delete_user: async () => {
if (!ctx.params.id) {
throw new Error("Missing required param: id");
}

const user = await getUser(ctx.params.id);

// ...
},
},
});
Did this section clearly explain what you wanted to learn?