Oracle APEX - APEX Component Designer

At Rittman Mead, the APEX consultancy team are always looking for ways to enhance and extend the product's core offering. Our latest project has seen us create a tool that makes it easy for you to customise JET and other 3rd party components and, after a few week's work, we're happy to announce the APEX Component Designer.

Within APEX, the component builder provides many javascript based components that can be utilised within its framework, examples being Oracle JET charts and calendars based on the FullCalendar library. The APEX interface provides native functionality for configuring the look and feel for these but only a subset of each library's functionality is exposed. If you want to exploit the full range of capabilities of these components then APEX provides a "JavaScript Initialization Code" section in the components attributes section but what to include there can be challenging, especially if you're not familiar with the specific js library.

If we take the example of JET components, for example, there are many, many options available outside what is declaratively configurable within APEX. Some are applicable to multiple components, while others are specific to certain types. Although the documentation is extensive, integration of these options with Oracle APEX is not a straightforward process.

For a more in-depth exploration of Oracle JET properties and chart modifications, you can refer to our previous blog post here.

For this reason, we opted to challenge ourselves and make the process easier through a scalable solution. The outcome? An APEX Application available for the community that generates the JavaScript initialisation code for you to use.

Here's the initial version supporting 6 different Oracle JET Charts and the Calendar component.

Launch the APEX Component Designer

Don't hesitate to contact us through the APEX.World Slack channel, use the feedback option in the app or email us at [email protected].

We're already planning to include more javascript based APEX components and options in upcoming releases.

Exploring the Tool: A Closer Look

Our initial objective was to aid developers in fine-tuning a JET chart and immediately seeing the customised outcome. Right from the start, it was evident that the final deliverable of this process should be a readily deployable piece of code that enhances the visual appeal of your application.

function(options) {
    options.styleDefaults = { 
        pieInnerRadius:"0.5",
        threeDEffect:"off",
        colors: [
            "#20e1ef", "#56e5f1", 
            "#75e8f3", "#8eecf4", 
            "#a4eff6", "#b8f2f8",
            "#cbf6fa", "#ddf9fb",
            "#eefcfd", "#ffffff"
        ], 
        pieFeelerColor:"#000000"
    }
    options.pieCenter = {
        labelStyle:"font-size:15px; color:black;",
        label:"Test Text in the middle"
    }
	return options;
}

As of now, the tool has capabilities for the FullCalendar component and six chart types: line, area, bar, pie, funnel, and bubble.

When you visit the homepage, you'll come across a report that highlights all the components we currently support. By clicking on any of them, you'll be directed to the generator page.

Each component page consists of three sections:

• The property panel, located on the right side, this presents a form containing all the component properties you can adjust. Each property is accompanied by a concise description and is organised by type.
• The preview panel displays the outcome of your customisation, providing a glimpse of what your adjustments will look like. It also includes a call to action to initiate the customisation process.
• The code panel showcases the finalised code, ready for use. It includes a call to action that allows you to easily copy the newly generated code.

Oracle JET customiser in action

Now, let's have some fun by making a few changes and checking out a preview of the chart.

Here, I've made some changes to the options and generated the preview. I adjusted the inner radius, changed the colour of a slice (which generates 10 colours), added a filler colour, a label, the label style and legend.

If you are not totally happy with how it looks, you can keep making more changes, play with different colours and options. Once you've designed your chart, there's a section in the bottom left called JavaScript Initialization Code. This gives you the exact code to copy and paste into your application. Doing this will give your chart the same awesome look that you've just designed.

If you have any ideas for different chart types or options that we have not included then you can leave feedback with the "You have an idea?" option in the menu

Roadmap

In the next version, we would like to include the following components.

• Cards
• Faceted Search
• Tree
• Rich text editor
• Markdown editor
• PopUp LOV

In summary

With the APEX Component Designer, you can quickly redesign APEX components so they have the look and feel that you desire and be handed the initialisation code that you can then paste directly into your APEX application to achieve the same results.

Find out more about our APEX services