FSI API: Swiper

Populating swiper slides

fsi.swiper.setSlides('<swiper id>', <template mapping>, <dataset>, true); 'true' (default) resets the swiper.

This method is appropriate when a swiper control has been created, and is to be populated by a dataset; for example, the JSON object output of a workflow. For details about the Swiper control, see Swiper Control.

The swiper slide template will comprise one or more controls. When using a workflow, each control is mapped to a JSON object key by the template mapping, and it's value is set by the corresponding key value in the dataset. Each key/value pair in the dataset defines a new slide in the swiper.

Example

Data object

A data object, SwiperData, holds some information about people:

A swiper slide is to be generated for each person in the data object.

Workflow

The workflow executes a query to retrieve the data about each person, and returns a JSON object, Result.

Slide template

The data is used to populate three text boxes on the slide template; text-WFName, text-WFAge, and text-WFEyeColour.

JavaScript

function onload() {
    fsi.workflow('SwiperData', {}, {}, null,
        function (data) {

            var mappingDataset = JSON.parse(data.Result).Output;

            if (mappingDataset.length > 0) {
                var templateMapping = {
                    'text-WFName': 'Name',
                    'text-WFAge': 'Age',
                    'text-WFEyeColour': 'EyeColour'
                };
                fsi.swiper.setSlides('swiper-Workflow', templateMapping, mappingDataset, true);
            }
            else {
                fsi.swiper.setSlides('swiper-Workflow', {}, {}, true);
            }
        },
        function () {
        });
}

Swiper

In use, by setting the Swiper Appearance properties, the swiper might look like this:

Calling a method

You can call any of the Swiper API methods using the statement below; refer to the Swiper website for details.

fsi.getById('<swiper id>').getSwiper().<method>

Useful methods

Update

fsi.getById('<swiper id>').getSwiper().update();

You should call this method after you:

• add or remove slides manually;
• hide or show the swiper;
• perform any custom DOM modifications to the swiper.

AppendSlide

This method adds a new slide after existing slides:

fsi.getById('<swiper id>').getSwiper().appendSlide(<slide HTML>);

You define the new slide as an HTML string; for example,

var newSlide = '<div class="swiper-slide" onclick="myAlert()">My new slide title</div>'; 

fsi.getById('mySwiper').getSwiper().appendSlide(newSlide);