How to build and deploy a widget in ITV Administration console

Back

Introduction

This simple tutorial will guide you through the steps on how you can build and deploy a widget in the ITV Administration Console so that you can see it in your portal and make the changes you want.

Build the widgets

Once you created a widget using using widget creator (npm run create) or in any other way, it needs to be build. You can build all your widgets by running ./gradlew grunt -Pcmd="build-webpack --profile=<profile> --onlyBuildAssemblyWidget=false" in your terminal in widgets directory, replacing by your wanted profile e.g. "revo2". Remember that you need to build and restart your widget development server - WDK - by running npm start every time you are creating a new widget.

How to deploy all widgets

1. First you need to have you widget development server - WDK - and your proxy of the client-portal up and running. Instructions on how to do that you can find here.

2. Go and login to ITV Administration Console. On the left menu click on Widgets and then on Widgets again. Search for % in the id field to see all your widgets. Click the show all button to reveal them all and then check them all. Click on the DeleteSelected button to delete all the widgets.

3. Click on Upload Widgets button under Widgets in the left menu. Click the Choose file button. The .zip file that contains the widgets are located inside the dist or target folder in your widgets folder. Below you can se an example of the folder and the .zip file. Click on the Next step button and then Save.

#!pre
widgets/
   dist/
      zips
      appletv/
      demo-widgets/
      fokuson/
      fokuson-react/
      fokuson4/
      multi-screen/
      widgets-master-r1.zip

4. Select all the widgets as before in step 3. Select a customer group on the to Customer Group dropdown. You can also choose a skin. Then click the Deploy selected button.

Deploy one widget

You can choose to deploy only one widget if you wish. You find all the widget .zip files for each widget separately under the zips folder in your dist folder.

Show a widget to the portal

You can always show a widget by running in your browser's console the following command.

#!bash
fokusEnv.widgetManager.showWidgetByWidgetId('NameOfTheWidget')

Moreover you can add your widget in the menu that appears in the portal. On ITV administration console go to Widgets Content -> Launcher Menu. Click on your active launcher menu and then edit in order to add the widget to the menu. Add a line of code with your responsive widget’s id as can be seen below.

For widgets created for Set-top boxes you can also choose a hotkey by the time you deploy it.

Back to Top