APEX slider using Splide
Overview
Oracle Application Express (Oracle APEX) is a rapid web application development tool for the Oracle Database. You can design and deploy professional applications that are both fast and secure using only a web browser and limited programming skills.
APEX has a lot of in-built drag and drop regions which can be used to build a page in the application. One such region is a List region which displays values based on either a static or dynamic list. The look and feel of these lists can be customized using custom list templates. In this post, we will give an overview on how to build a slider by creating a custom list template and integrating it with Splide.
About Splide
Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript with no dependencies. For more details on Splide refer https://splidejs.com/.
The Setup
Creating a dynamic list:
In this example, we will be creating a dynamic list using a SQL query and using this list to create a slider.
For more details on creating a dynamic list, go to https://docs.oracle.com/en/database/oracle/application-express/21.1//htmdb/creating-dynamic-lists.html#GUID-1B67A3C8-39FA-4868-9532-F68AFCD74651
To create a dynamic list, go to Shared Components -> Navigation -> Lists -> Create List and write your SQL query or PL/SQL code here. Below is a sample PL/SQL code for dynamic list.
Adding list to your page:
To add this list to your page, go to Page Designer of your APEX application and drag and drop a list region to your page.
Update the Source to the dynamic list you just created. When you run the page now it should show a region with list items placed one below the other.
Creating a custom template for the list region:
To create a custom template for this list go to, Shared components -> Templates and filter the templates to Type = ‘List’ (Actions -> Filter -> Type = ‘List’). Copy the Cards template to create a new template.
Including Splide in APEX
To include Splide in our application we will be importing the Splide JS and CSS file to our APEX application.
(Refer https://splidejs.com/guides/getting-started/ for other options available to include these files)
Download the latest package from https://github.com/Splidejs/splide/releases/latest/
Upload splide.min.js from dist/js directory and splide.min.css from dist/css directory to your APEX app -> Shared Components -> Static Application Files
Updating the custom list template
Now go to the custom template you created under Shared Components -> Templates to update the row template and include the above files.
To do these on the new list template:
- Go to the JavaScript tab and add reference to the JS file you uploaded. Also, add the below code to execute when the page loads to initialize Splide in your app.
2. Go to the Cascading Style Sheet tab and add the reference to the CSS file you uploaded.
3. Before List Entry tab, update the code as shown below
4. Template definition tab and update List Template Current and Noncurrent with the below code
5. Template Definitions for First Entry tab and update List Template Current and Noncurrent with the below code
6. After List Entry tab and update List Template After Rows with the below code
You can customize the look and feel of the Slider using Splide options. Refer https://splidejs.com/guides/options/ to find out about the list of options available.
Let us know what you think by joining the conversation on our public Slack channel!
