Docs: widget-creator by UW-Madison-DoIT

The Widget Documentation has more information about configuration options and more technical details.

In the starter template, select List of Links from the drop down.

A title and description have already been provided.

Widget configuration - Notice that sample text has already been provided:

{"launchText":"Launch the Full App","additionalText":"Additional Text","links":[{"title":"The Google","href":"http://www.google.com","icon":"fa-google","target":"_blank"},{"title":"Bing","href":"http://www.bing.com","icon":"fa-bed","target":"_blank"}]}

Let’s format that JSON so it’s easier to read

{
  "launchText": "Launch the Full App",
  "additionalText": "Additional Text",
  "links": [
    {
      "title": "The Google",
      "href": "http://www.google.com",
      "icon": "fa-google",
      "target": "_blank"
    },
    {
      "title": "Bing",
      "href": "http://www.bing.com",
      "icon": "fa-bed",
      "target": "_blank"
    }
  ]
}

Click the update button and notice that you have a fully functioning list of links widget already.

Let’s create our own list of links widget. We’ll use Apereo projects in our example.

For Title, type in “Apereo Projects”.

Description, type “My very first list of links widget”

For the widget config, copy and paste this:

{
  "launchText": "All Apereo Projects",
  "links": [
    {
      "title":"uPortal",
      "href":"https://www.apereo.org/projects/uportal",
      "icon":"fa-google",
      "target":"_blank"
    }
  ]
}

Finally, type ‘https://www.apereo.org/content/projects-communities’ for Launch URL

Let’s break that widget configuration down into parts. The first part is to notice that the launch text is configurable. Try updating the launch text to “See all Apereo projects”

"launchText":"See all Apereo Projects",

Click update and see what happens.

Try adding more links. If you need help, here’s some sample widget configuration you can copy and paste.

{
  "launchText": "See All Apereo Projects",
  "links": [
    {
      "title": "uPortal",
      "href": "https://www.apereo.org/projects/uportal",
      "icon": "fa-key",
      "target": "_blank"
    },
    {
      "title": "Sakai Project",
      "href": "https://www.apereo.org/projects/sakai-project",
      "icon": "fa-folder-open",
      "target": "_blank"
    }
  ]
}

You can keep adding more links and see that the widget auto formats the correct spacing and layout.

Try three links

{
  "launchText": "See All Apereo Projects",
  "links": [
    {
      "title": "uPortal",
      "href": "https://www.apereo.org/projects/uportal",
      "icon": "fa-key",
      "target": "_blank"
    },
    {
      "title": "Sakai Project",
      "href": "https://www.apereo.org/projects/sakai-project",
      "icon": "fa-folder-open",
      "target": "_blank"
    },
    {
      "title": "Student Success Plan",
      "href": "https://www.apereo.org/projects/student-success-plan",
      "icon": "fa-graduation-cap",
      "target": "_blank"
    }
  ]
}

See what happens the more you add!