Home > Uncategorized > ChangeCase: A Simple Apex 4.0 Plugin

ChangeCase: A Simple Apex 4.0 Plugin

A foray into Plug-Ins

To educate myself in the ways of the new Apex 4.0 Plug-Ins feature, I decided to create a simple item Plug-In which automatically converts all the text entered into the item either to uppercase or to lowercase, depending on which option the developer chooses. I’m making it available here not so much because I think it will be a useful Plug-In (though perhaps it might be if your requirement is very simple) but rather in the hope that it might be helpful to anyone else looking at Plug-Ins for the first time. I have heavily commented the code to explain what each bit is doing.

See it in action

A working example of this plugin can be seen here.

Download and install

The plugin itself can be downloaded here.

Once you have downloaded the Plug-In, you can install it by going to Shared Components > Plug-Ins > Import and following the prompt. You will then be able to create ChangeCase items in your application, choosing whether you want the contents to be automatically uppercased or lowercased.

Creating it from scratch

If, for the hell of it, you want to create this Plug-In from scratch as opposed to just downloading and installing it you can do so by following these steps.

  1. Within Application Builder go to Shared Components > Plug-ins and click “Create >”.
  2. Specify the following details and then click “Create”:

    Name
    : ChangeCase
    Internal Name: uk.co.tulley.changecase (or change this to be a universally unique name based on your domain name)
    Type: Item
    PL/SQL Code: Paste in the contents of this file. This contains two PLSQL functions (render_changecase and validate_changecase which we reference in the Render Function Name and Validation Function Name properties of this Plug-In). This PL/SQL code is heavily commented so should hopefully be fairly self-explanatory.
    Render Function Name: render_changecase
    Validation Function Name: validate_changecase
    Standard Attributes: Tick the checkbox labelled “Is Visible Widget”. If you do not tick this checkbox then there will be no option to specify a Label for our ChangeCase Item Plugin when we create an instance of it in our application. Since this is essentially just a slightly-modified Text Field, we certainly want the ability to specify a label.
  3. Click “Custom Attributes”. When we create a new instance of our new Plug-In, we want to be able to decide whether we want the contents to be automatically uppercased or lowercased so we create a custom attribute here to allow that decision to be made.
  4. Click “Add Attribute”.
  5. Specify the following details and then click “Create”.

    Scope
    : Component
    Attribute: 1
    Label: Case Alteration Option
    Type: Select List
    Required: Yes
    Default Value: UPPER
    Add Value button in List of Values Section: Create two entries. One with a Display Value of “Uppercase” & a Return Value of “UPPER”; and the other with a Display Value of “Lowercase” and a Return Value of “LOWER”.
  6. We want the value entered into any instance of our new Plug-In Item to be either automatically uppercased or lowercased. We want this to happen client-side so for this we need some Javascript. That very simple Javascript can be found in this file. Download this file to your computer.
  7. Back in Application Builder, click “Files” and then the “Upload New File” button.
  8. Browse for the changecase.js file that you just downloaded and then click “Upload”.
  9. Finally, click “Apply Changes”.

You will now be able to create ChangeCase items in your pages where you’ll be able to specify, under settings, whether you want the content automatically uppercased or lowercased.

About these ads
Categories: Uncategorized
  1. Ger
    November 17, 2011 at 12:42 pm

    The link to the Javascript code in Step 6 gives a 404 error.

  2. Bhavin Adhvaryu
    July 20, 2010 at 12:10 pm

    Hi Andy,

    After long time you have blogged something about Apex.

    Nicely blogged. I have created as per your steps. It worked like a charm.

    Welcome back Andy!!

    We all looking forward to new plug-ins.

    Kind Regards,
    Bhavin

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: