> For the complete documentation index, see [llms.txt](https://chadboyce.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chadboyce.gitbook.io/notes/scriptable.md).

# Scriptable

## Forum post [Suggested Approach?](http://talk.automators.fm/t/suggested-approach/7507)

[vaughan.hale](https://talk.automators.fm/u/vaughan.hale) June 17, 2020, 8:21am

*Suggested Approach?*

> I am trying to create a shortcut/script/automation that:
>
> * calls and API
> * displays the results in a similar way to a tableview (which has a couple action buttons on each row)
> * when a button is selected continues on with the shortcut (or runs a different shortcut) passing the selected rows details. Has anyone done anything similar or got any suggestions.

[schl3ck](https://talk.automators.fm/u/schl3ck) June 17, 2020, 10:33am

> Hi!
>
> * You can make API calls with[`Request`](https://docs.scriptable.app/request)
> * You can build a table in Scriptable with the[`UITable`](https://docs.scriptable.app/uitable), [`UITableRow`](https://docs.scriptable.app/uitablerow) and [`UITableCell`](https://docs.scriptable.app/uitablecell) classes. Don’t forget to call [`table.present()`](https://docs.scriptable.app/uitable/#-present) (where `table` is the instance variable of the `UITable` class) after you’re done building it to present it to the user.
> * To make buttons use either`let btn = row.addButton("caption")` (where row is the UITableRow instance of the current row you are building) or

```javascript
let btn = new UITableCell.button("caption")
row.addCell(btn)
```

and then assign your callback function to [`btn.onTap`](https://docs.scriptable.app/uitablecell/#ontap).

In the callback function you can do whatever you like. If you want to run a shortcut use

```javascript
Safari.open("shortcuts://run-shortcut?name=" + encodeURIComponent("your shortcut name here") + "&input=" + "your data here in your favourite string format (base64, json, URL encoded,...)")
```

(If you want to transfer the word “clipboard” to shortcuts, you have to write `"&input=text&text="` instead of `"&input="`. It seems that this isn’t documented anywhere, but it was like that 2 years ago. If you don’t do it like that, shortcuts will use the contents of the clipboard as input)

An example table:

```javascript
let table = new UITable();
// define contents of an example table
let data = [
	["foo", "bar", "baz"],
	["asdf", "quz", "42"],
	[123, 567, "add"]
];

let row, cell;
let first = true;
for (const drow of data) { // drow = data row
	// create a new row
	row = new UITableRow();
	// immediately add it to the table to not forget that part
	table.addRow(row);
	if (first) {
		// set the first row to have bold text
		row.isHeader = true;
		first = false;
	}
	for (const [i, dcell] of drow.entries()) {
		// the last cell should contain a button
		if (i === 2) {
			// cast dcell to a string, otherwise we will get an error like "Expected value of type UITableCell but got value of type null."
			cell = row.addButton("" + dcell);
			// even though the next line is not needed because it is the default setting, I like to do it anyway to be more specific of what is going on
			cell.dismissOnTap = false;
			// register our callback function
			cell.onTap = () => {
				// create a simple alert to have some user feedback on button tap
				let alert = new Alert();
				alert.message = dcell;
				alert.present();
				// no need to add buttons, they will be added automatically
				// no need to await it, because we don't need anything from the user
			};
		} else {
			// cast dcell to a string, otherwise we will get an error like "Expected value of type UITableCell but got value of type null."
			cell = row.addText("" + dcell);
		}
		cell.centerAligned();
	}
}
table.present();
```

I can’t give you more advice because that depends on your specific case.

[vaughan.hale](https://talk.automators.fm/u/vaughan.hale) June 17, 2020, 11:06am

> Thank you so much for your detailed reply. I will take this a have a good at applying it all tomorrow. Can you tell me if you can do much styling to rows and cells etc?

[schl3ck](https://talk.automators.fm/u/schl3ck) June 17, 2020, 10:28pm #4

According to the docs the only styling available is

* separators between rows ( `UITable.showSeparators`)
* regular or bold font ( `UITableRow.isHeader`)
* background color of each row
* height of each row
* space between the cells in one row ( `UITableRow.cellSpacing`)
* relative width of cells (to each other in the same row: `UITableCell.widthWeight`)
* color of text (not buttons)
* alignment of cells

If you for example want a separator between multiple rows to create something like sections without showing separators between every row, you can set the background color of a row to black and it’s height to something small (like 2 or 3, just experiment with it).

If you need more styling options, then you can make the table in HTML with custom CSS and display that in a `WebView`.

* [Home](http://talk.automators.fm/)
* [Categories](http://talk.automators.fm/categories)
* [FAQ/Guidelines](http://talk.automators.fm/guidelines)
* [Terms of Service](http://talk.automators.fm/tos)
* [Privacy Policy](http://talk.automators.fm/privacy)

Powered by [Discourse](https://www.discourse.org), best viewed with JavaScript enabled


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://chadboyce.gitbook.io/notes/scriptable.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.