Sliding Panel Widget
This type of widget belongs to the Basic category in the widget library. It enables you to insert a slideshow showing a series of slides that can contain text or images, point to a HTML page, or call a page from the app or from another app.
- The content of the slideshow is defined via the text editor.
- A set of properties are used to configure the behavior of the slideshow in execute mode, e.g. auto advance, navigation display mode.
Notes
see General remarks on widgets
- The order in the Slides list defines the order in which slides are displayed in the slideshow.
Caution
- If you disable the auto advance function of the slideshow (Timer option), you should display the Previous
and Next 
arrows (Navigation Arrows option). If you do not do so, users will not be able to view the slideshow.
Best practice
- To create a slideshow using only the pages in the app, you can use the Sliding Page widget.
- To create a slideshow using only images, you can use the Sliding Image widget.
Example
You want to display a slideshow containing two images and a hyperlink to a website.
List of properties
Content
Slides: List of slides included in the slideshow. Click [ ADD SLIDE ] to add a new one - see the procedure
Setup
Animation: Used to define the transition effects between slides in the slideshow. You can apply a Fade effect or no transition effect, i.e. Slide.
Timer Speed: This is the speed, in milliseconds, at which slides in the slideshow will advance. This defines the amount of time each slide will be displayed.
Pause On Hover: Used to define if the slideshow will automatically pause when the cursor is hovering over it (box is checked) or not (box is not checked).
Resume On Mouseout: Used to define if the slideshow will automatically resume when the cursor is no longer hovering over it (box is checked) or not (box is not checked).
Next On Click: Used to indicate if the slides in the slideshow will advance when users click the slideshow, regardless of whether the duration defined in Timer Speed has ended (box is checked) or not (box is not checked).
Animation Speed (Note: To be defined when the transition effect is Fade): Time, in milliseconds, required by the system to display each slide completely.
Stack on Small: Used to indicate if slides are stacked on top of each other in a static way (box is checked) or if they advance horizontally (box is not checked). You should use this option for displaying slideshows on devices with low screen resolutions (e.g. smartphone). Note: This option is taken into consideration for devices whose height is less than or equal to 40 em (the em unit refers to the font size).
| Box is checked | Box is not checked |
|---|---|
 |
 |
Navigation Arrows: Used to indicate if the Previous and Next arrows are displayed by the side of the slideshow (box is checked) or hidden (box is not checked).
| Box is checked | Box is not checked |
|---|---|
 |
 |
Slide Number: Used to show if the slide number is visible (box is checked) or hidden (box is not checked). Note: The order number of the slide appears at the top left of the slideshow followed by the total number of slides. If the order of the slides in the slideshow is modified, then the order number of each slide will automatically be modified.
Slide Number Text: Text displayed between the order number of the current slide and the total number of slides.
Slide Number Text: of ==> text displayed in the slideshow for slide 2: 2 of 3
Bullets: Used to indicate if bullets 
are displayed at the bottom of the slideshow (box is checked) or not (box is not checked). Each bullet displayed represents one slide and can be used to access it directly.
| Box is checked | Box is not checked |
|---|---|
 |
 |
Circular: Used to indicate if the slideshow will loop continuously (box is checked) or stop after the last slide (box is not checked).
Timer: Used to define if the slideshow can run in automatic mode (box is checked) or not (box is not checked). Note: When the timer is enabled, the progress bar indicating the remaining time of the slide and the Pause 
and Resume 
buttons are displayed at the top right of the slideshow.
Color Of The UI Elements: Color of navigation bullets for inactive images.
Color Of The UI Elements (active): Color of the navigation bullet for the active image and color of the Previous /Next arrows.
Theme
Procedures
How to create a slideshow
1. Click [ ADD SLIDE ]. In the Add your content box, enter the HTML code of the page you want to include in the slideshow or click 
to open the text editor.
2. Repeat this procedure for the other slides in the order in which you want to display them.
- To change the order in the Slides list, click and drag the slide you want to its new position using
.
- To delete a slide, click
.
3. Define the slideshow settings in the Setup section.
4. Switch to execute mode 
to view the slideshow as it will appear to users.
How to retrieve the launch URL of an app
1. In the App Gallery, click 
next to the app you want to run.
2. In the graphic editor, click 
in the toolbar.
3. Copy the app launch URL.
4. Return on your app and paste the URL:
- either in the URL property of a hyperlink inserted on a Label, Header/Footer or HTML Code properties of a widget (via
in the text editor);
- or in the URL to Load property of the Button widget ;
- or in the Data > Select Link Type property of the Menu widget.