Date Viewer - SVG Example

Hey All,

Here is a super simple widget that just displays a time in a more visually appealing way, I could see throwing this on the corner of your master layout much like many people do with the logged in user name.

The reason I choose to share this on is because it hits on a really useful technique in custom widgets, working with SVG files. In this case, I used Figma to create the widget I wanted, exported it as an SVG, and then just used javascript to dynamically change the selected date.

Makes the formatting incredibly easy to make flexible. I have found it challenging to use this approach to something where you want to dynamically add to the SVG being displayed (for something like a checklist that needs to add or remove elements based on the user input), but I have seen it done, so its certainly possible.

Pete
Note: This widget hasn’t gone through Tulips code review process, so use it at your own risk
customWidget-Date Viewer - Complete.json (2.6 KB)

1 Like