Widget Examples

The centerAlignContent(), topAlignContent() and bottomAlignContent() functions were introduced during the beta of 1.5 but was also removed during the beta period. They were replaced with spacers.

Spacers add fixed or flexible spacing to a widget. Adding a spacer before other content in the widget, will push the content down to the bottom. This is equal to (the now removed) bottomAlignContent() function. Now if you instead added a spacer below the content, it would be pushed to the top, which is equal to topAlignContent().

Replacing these fairly straight forward functions with spacers might seem like an odd decision at first. Spacers are more complicated but also offer way more flexibility. For example, if you build a widget like this:

Text A
Spacer
Text B

Now you’ll get Text A aligned in the top and Text B aligned in the bottom. That wasn’t possible with the older functions.

This is just the top of the ice berg for spacers. They become much more important in the next update :smiley:

1 Like

I am very new to this and have a question or two. Would it be possible to create a widget that launched iOS apps? For example, if you just has a widget with a text list of apps and you click on the name of an app, could it then launch the app? Or would the text be too small for the phone to reliably know what text you are touching?

Right now I believe 3rd party apps can’t have their widgets have multiple tap targets. You could, on tap run a script or shortcut which then displays a menu of apps to open.

1 Like

Thanks! I will give that a try.

@Matt_Hood @dustinknopoff Multiple tap targets will be supported in the next update to Scriptable :blush:

6 Likes

You could launch apps with URL schemes right?

Thank you for the clarification Simon!

Got it working :smiley:

1 Like

Then, assuming you can pack tap targets tightly in a Scriptable widget, you neatly get round iOS’ very wasteful layout.

That would make Widgets much more appealing.

4 Likes

My thoughts exactly!

Total newbie here, trying to learn by creating a super packed view to my calendar. I’m tweaking the code by @mzeryck (love you, man).

Q: How do you use different text stylings on the same line? Imagine a list…

THU: Meeting
THU: Dentist
FRI: Zoom call
SAT: Lunch with Dad

…where day is red and title white.

All examples I find here have only one variable per line. I see how you can stylize that.

Using addText per variable places them on separate lines.

I’m glad you like it! You’re right that addText only allows single lines of text. This is a limitation of the Scriptable app itself. However, Simon did mention that horizontal layouts may come in the future, which would allow the layout you described (since text could theoretically be formatted individually in each column).

2 Likes

So, looking at the example widgets here, none of them do anything explicitly to refresh. (And I’m replying to you because you answered the question about refresh.)

I have two questions on this:

  1. What sort of frequency should I expect? 15 mins, 1 hour? 10 seconds? I’m definitely not seeing the latter - and that’s OK.
  2. If I have a widget with a button in it can pressing that button lead to a refresh?

And, since I mentioned a button, is it possible to simulate an array of buttons in a widget? Perhaps by use of an image I can tap on and whose tap coordinates can be queried?

The “array of buttons” thing would be good because it would enable me to cram more in than iOS natively allows.

(Looking at the docs I don’t see anything about interacting with a widget. So maybe the above isn’t feasible.)

2 Likes

Hi Martin,

  1. with iOS 14.0.1 the behaviour of widgets has been improved and is more stable. Expect the widgets to refresh approximatley every 5 minutes. If your battery is low or your iPhone runs in low power mode, the update is less frequently.
  2. no, afaik it’s not possible to refresh the widget’s content by pressing it or a button on it
  3. Simon is implementing a feature which makes it possible to define more than one tap zone/button.
    EDIT: It’s now available on the TestFlight beta.
3 Likes

Ok, thanks! By trial and error I finally got the widget to do otherwise what I wanted, a compact event list with week number

  • It shows date, local abbreviation for the day and week number on top
  • It highlights the next event. Date and duration on line 1 and the title on 2 (date is hidden if it is today)
  • it shows a list (date and title) for the the following events (max total 7, now it’s limited to a calendar week, but gotta tweak that)

image

I feel so good about this.
Your code helped me to figure things out.

I’ll tweak test a little bit more, add comments and then post the code.

5 Likes

I’m on the TestFlight beta. This I will test.

But at least for now I have the basic mechanics of a Scriptable widget - and found examples and the docs.

This is going to be fun… :slight_smile:

Hi Erkka. When do you plan to post the code? I figure out that your widget completely fit my needs :blush:

1 Like

Is there a way to make the widget’s background gradient dynamically changing?

As the widget is redrawn (and the script rerun then) by the system, you could store a value (to a file or the keychain) and use it to change the gradient…