---
title: Scriptable Note
tags: Scriptable, iOS
---

# Scriptable Note

This is a note about how to make an iOS widget with ["Scriptable"](https://docs.scriptable.app) APP.
Reference: [Scriptable Docs](https://docs.scriptable.app/)
You can also read docs in App, and it seems there are more info there.

## Write a Script for Widget Purpose
Use [`ListWidget`](https://docs.scriptable.app/listwidget/) object to build a widget.

// make sure the script runs in widget
if (config.runsInWidget) {
    // add a list widget
    const widget = new ListWidget();
    
    // give the wigdet backgound color
    widget.backgroundColor = new Color('#000000');
    
    // add something ex: text
    title = widget.addText("Title");
    title.textColor = new Color('#FFFFFF');
    
    // set the widget
    Script.setWidget(widget);
}

// end the script
Script.complete();

### Widget Stack

// add a stack
stk = widget.addStack();

// set layout
stk.layoutHorizontally();
stk.layoutVertically();

// use spacer to align content
stk.addSpacer();
stk.addText("Some text...");
stk.addSpacer();

### Text in Widget
There are different text type in `Scriptable`, and under `ListWidget` is [`WidgetText`](https://docs.scriptable.app/widgettext/).

let title = widget.addText('title');

// set Font, there are default font functions, also you can use font name and size
title.font = Font.title3();
title.font = new Font('Arial', 10);

// set color, see #Color in this note for more details
title.textColor = Color.white();

// set shadow
title.shadowRadius = 2; // default 0
title.shadowColor = Color.darkGray(); // default black

### Preview in App
Use `ListWidget.presetnSmall()` to preview the widget in App.

const widget = new ListWidget();
widget.backgroundColor = Color.black();

title = widget.addText("Title");
title.font = Font.headline();

if (config.runsInApp) {
    widget.presentSmall();
}

## Color
See [doc](https://docs.scriptable.app/color/).
1. Use hex. (ex: `#FFFFFF`, `#000000`)
2. Use provided color. (ex: `red()`,`darkGray()`)
3. Use dynamic colors. (`dynamic(lightColor, darkColor)`).
4. Adjust opacity by second parameter. (ex: `new Color('#FF0000', 0.5)`)
:::warning
Opacity is not working in widget background, it seems you can only use the same image as your wallpaper to make it looks like transparent.

    // This will not set a transparent background to widget, but only a darker color.
    const widget = new ListWidget();
    widget.backgroundColor = new Color('#FF0000', 0.5);

:::

## File Manaer
Access local files or files in iCloud.

### iCloud
Access iCloud folders.

// start a file manager
let fm = FileManager.iCloud();

// get path of folder which you can see in iCloud root called 'Scriptable'
let dir = fm.documentsDirectory();

### Local
:::info
You can also access App folder in `Scriptable`.
But since you can not access that folder by `Files`, use bookmark may be a better way to import data.
:::

// start a file manager
let fm = FileManager.local();

// get path of 'Scriptable'
let dir = fm.documens.Directory();

// get path of bookmarked folder or file
let path = fm.bookmarkedPath('bookmark-name');

#### Set Up a Bookmark
1. Open `Scriptable` and click the icon in the upper left corner.
2. Click `File Bookmarks`.
3. Click `+` in the upper right corner.
4. Choos `Pick Folder` or `Pick File`.
5. Select the folder or the file you want to bookmark, and click `open` in the upper right corner.
6. Input the bookmark name and click `save`. The name you input in this step will be the parameter which will be used in the scripts.