Oracle Developers
Published in

Oracle Developers

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:

  1. 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!

--

--

--

Aggregation of articles from Oracle engineers, Groundbreaker Ambassadors, Oracle ACEs, and Java Champions on all things Oracle technology. The views expressed are those of the authors and not necessarily of Oracle.

Recommended from Medium

Console.X Will Make You a Better Programmer!

My SDBA Coding Bootcamp: Episode 4

2019 React Conferences Highlights

React: Form for Contact Add

Implement AdMob in React Native with Firebase

Implement AdMob in React Native with Firebase

AngularJS migration — hard reset and rebooting from Angular 2/4/5/6

Daily YouTube Trailer Views… With A Little Help From Reddit

What JavaScript Developers Can Learn from C++

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ashritha Malli

Ashritha Malli

More from Medium

OpenID Connect & OAUTH 2.0

Kafka Connect Custom Single Message Transform using JSLT

gRPC with springboot

Distributed Transaction Tracing with Transaction Ids in JVM Services