Tutorial - Building a Random Name Selector Widget

[Graham Quince]

Before you start, you’ll need access to the FrogCode Editor.  Contact the Service Desk to have this enabled for you account.

You’ll also need to download the files for the Basic Random Name Selector.

The download contains the existing widget (TGZ) and all the files required to create the widget – most of which FrogCode will generate “empty” versions for you.

Now that you have the files:

• open FrogCode Editor
• click on the Action Cog
• And choose New.

Select Widget and set the name of your widget to be “Random Name – Basic”

FrogCode Editor will then create an empty template for you, containing all the files needed to make a widget. 

 

  Crucially, this widget has its own unique UUID, which is reflected in the code.   Make a note of this UUID

In the Editor’s file browser, expand assets, then styles.
In the corresponding downloaded files, copy the contents of main.css to the Editor version.  

  Note the name in the main.css is ‘Widget.RandomName-Basic’.  

If the Editor’s main.css had a slightly different name, you’ll need to alter the pasted code to match this.

In the Editor’s file browser, new expand views and replace the contents of main.ejs with the downloaded version.

And repeat these steps for lang.manifest.json, widget.ejs and widget.js

In widget.ejs, the UUID occurs for both the icon (line 2) and the widget title (line 3).  Replace these with the UUID you made a note of earlier.  (If you have lost this UUID, you can find it widget.manifest.json)

 

In widget.js, replace the UUID on lines 2, 3, 4 and 46

---

 

Once you’ve made all these changes, you can save all the files and use the play ▶ button to preview the widget.

 

Things to note:

• Widget.js is the code for the widget, EJS files are the layout.  
• Manifest files, such as lang.manifest.json contain data which is loaded into the widget.
• The code in widget.js is commented throughout.  
• Ask questions here if you need help.
• Main.ejs is the widget displayed live, i.e. when the site is viewed, not in editing mode.  It is loaded in on line 64, using this.view(‘main.ejs’);
• Widget.ejs displays the widget in editing mode (line 152).  
• There is a reference application on your platform, called FrogCode APIs, which contains information about widget preferences etc…

When you’re finished with your alterations and you’ve replaced the widget icon (download the PSD here), right-click on the widget and choose Deploy.  This will send the widget to Package Manager and you can publish it.

If you make amendments to the widget, you’ll need to update widget.manifest.json on line 19, adding a new version number.  When deploying, Frog will check this number for updates.

Once you’re happy with your new random name selector, please post some screenshots to the forum and let us know if you’d like to share the final widget.  We can copy it from your platform and post it to the community.