Developing your own widgets, getting started

Homepage widgets are mini applications written in HTML, with JavaScript, PHP or Microsoft .Net for dynamic behaviour. They allow the extension of your CMS to provide additional functionality and easy integration with third party applications.

To get started, you will need a basic understanding of HTML. Later, as you write more sophisticated widgets, you will probably need to learn either some PHP or ASP.Net if you are not familiar with them already.

Creating, Uploading and Managing Widgets on PHP based systems

On a PHP based system, a widget can consist of at most four parts:

  • public.php - the file that contains the HTML or PHP you want your website visitors to see.
  • public.js - the file that contains the JavaScript used in public.php. This file is optional.
  • secure.php - the file that contains the HTML or PHP used to specify any settings when using the homepages designer. This file is optional.
  • secure.js - the file that contains the JavaScript used in secure.php. This file is optional.

Before the widget can be uploaded to your CMS, the files above must be compressed into a zip file.

It’s recommended to test your PHP widget on your website as a separate script, before you upload it to the CMS. This will give you a chance to fix any bugs or errors before it’s embedded in pages in your CMS.

Screenshot

Once you’re happy that the widget is ready to be used, it is ready to be uploaded. From within the main Jadu CMS Control Center select Open menu followed by the Widget Manager option from the Utilities menu. Click the Upload NEW widget button at the bottom of the list. This will open up the Widget upload area.

The Widget upload area

  • First you’ll be asked to name the new widget. The title of your widget will be that used in the widget menu in the homepage designer, so it’s best to make it clear and concise.
  • Click the Browse button and find the widget zip archive on your computer or network.
  • Next, give your widget a description.
  • The Default width of your widget will define the width of the widget as a percentage of a row when it’s first dropped into a homepage.
  • If your widget requires categories to be chosen from your website’s taxonomy, tick the Requires categories tick box.
  • If your widget should only be shown to visitors who have signed into your website, change the Signed in users only dropdown to Yes.
  • Scope is used to determine what site a widget is available on, i.e. All sites; This site only; Galaxies only; Enterprise sites only.
  • Visible means that you can hide the widget so it doesn't appear when building a homepage - i.e. it might be in development, or you may have decided not to use it but may not want to delete it in case it is needed in the future.
  • Click the Upload Widget button once you’re happy with the settings you’ve specified, and the widget will be added to the widget menu of the homepages designer.

How to edit an existing widget

When editing a widget you will be presented with a page that looks very similar to the widget upload page. There is however one important change.

When uploading a widget you must select a zip archive using the browse button, however when you’re editing an existing widget you are given the option to Manually enter widget code.

When you check the radio button to edit the code manually, you’ll be shown four text areas that represent the four possible files in your zip archive.

  • The Front-end text area reflects the code that would be in public.php.
  • The Front-end Javascript text area reflects the code that would be in public.js.
  • The Settings text area reflects the code that would be in secure.php.
  • The Settings Javascript text area reflects the code that would be in secure.js.

Developing Widgets using HTML

The simplest widget is just a few lines of HTML. This widget displays the message Hello, world!:

<div class=”helloWorldWidget”>
    <h2>Hello, world!</h2>
</div>

We can also use widgets to send values to other sites using forms. This widget lets you search for your Local NHS services:

<div class="nhsWidget">
    <form method="get" action="http://www.nhs24.com/FindLocal">
        <label for="txtPostcode">Please enter your full postcode: </label>
        <input name="postcode" type="text" id="txtPostcode" value=" maxchars="10" />
        <label for="frmServList">Please choose service:</label>
        <select name="service" id="frmService">
            <option value="Pharmacies">Pharmacies</option>
            <option value="GPs">GP Surgeries</option>
            <option value="Dentists">Dentists</option>
            <option value="Hospitals">Hospitals</option>
            <option value="TravelClinics">Travel Clinics</option>
            <option value="SexualHealth">Sexual Health Clinics</option>
        </select>
        <input type="hidden" name="page" value="s11" />
        <input name="imageField" type="submit" value="Search" id="phSearchBtn" />
    </form>
<div>

results matching ""

    No results matching ""