Sliding Panel Widget

Last modified on 2022/05/28 10:53

Apps - Widget - Sliding Panel icon.png 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

    Open url.png  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 Apps - Previous icon.png and Next Apps - Next icon.png arrows (Navigation Arrows option). If you do not do so, users will not be able to view the slideshow.

Best Practice big icon.pngBest 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.
         EVApps - widget Sliding Panel - Example.png

List of properties

Content

Slides: List of slides included in the slideshow. Click [ ADD SLIDE ] to add a new one -  Open url.png  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
Apps - widgets Sliding - Stack on Small On.png Apps - widgets Sliding - Stack on Small Off.png

Navigation Arrows: Used to indicate if the Previous Apps - Previous icon.png and Next Apps - Next icon.png 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
Apps - widgets Sliding - Navigation Arrows On.png Apps - widgets Sliding - Navigation Arrows Off.png

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.
         Example documentation icon EN.png  Slide Number Text: of ==> text displayed in the slideshow for slide 2: 2 of 3

Bullets: Used to indicate if bullets Apps - widget Sliding - Bullets icon.png 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
Apps - widgets Sliding - Bullets On.png Apps - widgets Sliding - Bullets Off.png

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 Apps - Pause icon.png and Resume Apps - Play icon.png 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 Apps - Previous icon.png/Next Apps - Next icon.png arrows.
         Example documentation icon EN.png  Apps - widgets Sliding - Color Ui elements.png

Theme

    Open url.png  see Properties description

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 Apps - Edit icon.png 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 Apps - Order objects icon.png.
  • To delete a slide, click Apps - Delete icon.png.

3. Define the slideshow settings in the Setup section.

4. Switch to execute mode EVApps - GUI - Execute icon.png 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 Apps - Application properties icon.png next to the app you want to run.

2. In the graphic editor, click EVApps - GUI - Share icon.png in the toolbar.

            EVApps - GUI - Share Apps.png

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 Apps - Text Editor - Hyperlink icon.png 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.
Tags:
Powered by XWiki © EasyVista 2022