3

I am creating an Umbraco site and I want to allow site admins to be able to place a "widget" (not sure if this is the right term) on a page that will render a table with data from an http service.

A made up example service

Let's suppose I have an external data service with an http api that exposes a database of movie titles. Let's pretend it has two endpoints

1) List Genres - Returns JSON list of genres

http://api.movies.com/genres

2) Search - Returns JSON list of titles matching search parameters

http://api.movies.com/search?genre=comedy

My desired user experience in Umbraco admin

I want to provide a way for the umbraco user to place a "movie genre widget" on a page in the Umbraco admin. After placing the widget on a page, they would be able to specify the genre for this widget by selecting a genre from a dropdown. This dropdown would be populated by endpoint #1.

When the page is rendered to end users, it would make a call to endpoint #2 to populate a list of movies matching the genre that the umbraco user specified for this widget.

I am brand new to Umbraco (as of today). I have spent 3 hours reading through the docs and looking at starter kits and I am not sure how to accomplish this.

Can anyone point me in the right direction? Should this be a Plugin? A Template? A Property Editor?

Any help is appreciated.

Community
  • 1
  • 1
jessegavin
  • 74,067
  • 28
  • 136
  • 164
  • Will the widget's position be fixed within the page template or do you need the editors to be able to move it around along with other widgets within a Grid? There are many ways to do what you've asked and the answer would be different depending on the preferred backoffice editors' user journey – elolos Mar 28 '16 at 18:24

2 Answers2

5

The two different components that you need to implement are a backoffice property editor to display a dropdown menu with values loaded from an external service and a front-end component that loads external data based on the previously selected values

First, the backoffice property editor. While you can develop your own custom property editor using Angular, I recommend having a look at the nuPickers package that seems to offer a number of dropdown implementations that may suit your purpose. Once this is done, the editors' choice of genre will be persisted in the database.

Now the part where you use the selected genre to load the movie widget. The simplest solution is to have the widget as a Partial View that is nested within the Umbraco template.

There are many ways that you can retrieve the genre dropdown property value (e.g. use strongly typed or dynamic API), one example would be:

var selectedGenre = Model.Content.GetPropertyValue<string>("selectedGenre")

One thing you need to make sure is that the selected genre value is passed to the partial by the template like so:

@Html.Partial("movieWidget", selectedGenre)

Also, make sure that your partial view's model matches the type of selectedGenre which in this example is string.

The last part is calling your movie service and passing it the selected genre value. The easiest solution by far is to just go ahead and call the service from within your widget partial view.

While this might be just fine for a simple/small project, it's generally considered best practice to move your logic to a controller. This is a more advanced scenario in Umbraco where you have to make it use your own controller rather that the default controller it uses to render templates. In case you need to go this approach, please have a look at documentation for creating custom controllers in Umbraco

elolos
  • 4,310
  • 2
  • 28
  • 40
0

Maybe look at the Archetype package? http://24days.in/umbraco/2015/umbraco-zeitgeist/#picked-widgets

If you use ordinary macros, there's no way to get external data sources as parameter values. But creating a "widget repository" would allow you (or your editors) to create custom content bits that you then could create a picker for on your page.

Creating a data type editor with a dropdown populated by external values should be relatively simple - examples on how to do that should be over on our.umbraco.org.

Lastly, as a newcomer to Umbraco, consider a (one-month) subscription to umbraco.tv - there's a bunch of nice videos to help you get started :-) #h5yr

Jannik Anker
  • 3,320
  • 1
  • 13
  • 21