Activities Control Module

Introduction

The Activities Control is available on selected pages. It's pre-populated with nearly 100 activities each with an icon, name, description and link to extensive information on www.scouts.org.uk.

You can define which activities are displayed, personalise text, links and icons, and also add your own activities.

The activities can be displayed in a list or as a collection of tiled icons. When used in connection with a Campsite or Activities Booking form, activities can be added to the form directly from the activities control.



Module Settings

Activities Control Settings

Click the [Edit] button to show the settings.



Activities Control Settings

Initially, this shows that the Scouts Online Default settings. To change this, select either your default or section specific setup from the drop down list. You can then click the [Get settings from Default] button to copy the default settings as a base from which to edit.

The settings include an Activities table and various appearance settings fields. The table has the following columns:

The Up Arrow and Down Arrow buttons allows you to re-arrange the row display order.

If the Show? box is ticked, it will be shown in the control.

Name: If left blank, it will use the default activity name. Enter text here to override it.

Description: If left blank, it will use the default. Enter text here to override it.

Sub-Description: Text added here will show in the right-hand column of a List or in the hover text of a Tile.

Image URL: If left blank, it will use the default. Enter text here to override it.

Hyperlink: If left blank, it will use the default. Enter text here to override it or set it to NONE to disable hyperlinking.

The Control Width field defines the width when displayed. The number of pixels should be set in the format of 500px.

Maximum Height defines the most vertical page space to use. If the space required is bigger than this maximum, scroll bars will be displayed. Leaving this field blank, will automate the height of the control, without scroll bars. The number of pixels should be set in the format of 500px.

The Style field controls the appearance, with the following options:

  • Blank: The activities control will not be shown
  • Tiled + Links: Show tiles, with hyperlinks to a specific web page
  • Tiled + Booking Button: Show tiles, but clicking the icon will add the activity to a campsite/activities form
  • List + Links: Show a list with an icon, name & description and optionally a sub-description column, with hyperlinks to specific web page when clicking on the icon
  • List + Booking Button: Show a list with an icon, name & description and optionally a sub-description column. Clicking the icon will add the activity to a Campsite / Activities Booking form

The Icons Per Line field defines the number of icons that show horizontally for tiled styles.


Clicking [save] will store the changes you made. Alternatively, you may change the drop down list back to Scouts Online Default to revert back to using the default settings.



Examples


List + Links

List and information

This can be accomplished by setting the Style to "List + Links". Clicking one of the icons will open a new browser tab showing the page setup in the Hyperlink for that activity.

As with all the viewing styles, it's possible to limit the height of the list, and show scroll bars if necessary, using the Maximum Height settings field. E.g. 315px for 3 rows high.

This view shows an icon link button, the Name and Description, and can also show a Sub-Description as a third column.



List + Booking Button

List with booking button

You can set this up, by setting the Style to "List + Booking Button".

This view shows a [select] button. It can also show a Sub-Description above the button. When used in conjunction with a Campsite or Activities booking form, clicking on the [select] button will add the activity to the form.



Tiled + Links and Tiled + Booking Button

Tiled Icons

To set this appearance, leave the Maximum Height field blank or at a relatively high number of pixels, set the Style to one of the "Tiled..." options and the Icons Per Line as desired (8 in the example above).

When the style is set to "Tiled + Links", clicking on a button will open a new browser tab showing the pages setup in the Hyperlink for that activity.

When the style is set to "Tiled + Booking Button", and in conjunction with a Campsite or Activities Booking form, clicking an icon will add the activity to the form.



Horizontal Tiled

Tiled Horizontal Icons

The Tiled styles can also be used to create a horizontal scrolling icon list. This can be accomplished by setting the Maximum Height to 170px, the Style to one of the "Tiled..." options and the Icons Per Line to 99999.