Transcript

Experience the new login with Oracle SSO and the very helpful List of Workspaces (demonstration)

Oracle APEX 5 Lesson 1

 

Logging in, Oracle SSO and the List of Workspaces

 

>> Tyson:  The first thing I want to show you I think is, hands down, just my favorite feature.

 

I’m currently logged into this application and if I go Home, you can see I’m now at the application builder. One thing that’s kind of nice is you can see I have my little user icon now, so you can easily identify faces to names, little personalization there with the new APEX 5. But one thing that I’m going to do is that I want to sign out of the builder.

 

[pause]

 

Notice that it redirected me to single sign-on or to Oracle single sign-on. In other words, to authenticate to the builder, I’m not using the built in builder authentication. This is redirecting to a single sign-on that is authenticating me. Now that’s really awesome. What I’m going to do here is I’m going to go to apexea.oracle.com. I’m going to click the “Sign in” button here.

 

[pause]

 

It’s redirecting me to Oracle single sign-on. I’m going to click “Sign in.” Now this is why I think it’s so awesome. I don’t have to remember what workspaces I have access to. I just get a list of my workspaces here.

 

That right there is really awesome to me. So we’re going to go ahead and we’re going to sign into the SB_DEMO workspace. Notice I didn’t have to enter a password because I already signed in.

 

You might notice already that things are looking really different. Thematically, the theme is very different but the structure is more or less the same. One thing that change drastically is you can very easily get to packaged applications.

 

Before if you wanted to get to packaged applications, you actually had to go to the application builder, create application, and then go find “Create a Packaged Application.” Here you can just click on “Packaged Applications” and you can go ahead and take a look at the gallery and dig around as you need. That’s something I’m not going to explore too much, I just wanted to point out.

 

[pause]

 

Now what I’m going to do is I’m going to navigate into the APEX 5.0 new features application.

 

[pause]

 

Again, things are looking pretty different thematically, but it’s still kind of similar structure that we’re used to. I tend to like to use this report view here over the icons. I feel like I get more information this way about my different pages. But obviously, you don’t get to see as many pages in one view.

 

[pause]

 

Let’s go ahead and run my application. That was pretty interesting. Did anyone notice what happened there? I clicked “Run Application” and APEX opened a new tab.

 

I don’t know if you’ve ever had to deal with this before or that’s how you’d like to edit your applications. That’s sure how I like to work. What I would do is I would go to the builder in one tab and then I’d make sure to right-click. Or if it was a link, I’d right-click and I’d open a new tab. I have my builder on one tab and actually looking at the application in another.

 

APEX just does that for you now and it manages that for you. I want to click edit page one here and it shoots me back to my other tab, and now here I’m looking at the details for page one.

 

I know this page was incredibly overwhelming for me the first time that I saw it but don’t panic. It makes a lot of sense. It’s very intuitive after you just start spending a couple of minutes with it and just moving things around.

 

Copyright SkillBuilders.com 2017

×
Transcript

New Application Builder and Responsive Theme (demonstration)

Introduction to APEX 5 Lesson 2

 

New Application Builder and Responsive Theme

 

>> Tyson:  The first thing I want to look at has to do with the application and the theme.

 

Here you can see this is the new universal theme and what’s really awesome about this theme is that one, it’s designed to be entirely responsive. So if I shrink my screen, you can see that everything is trying to minimize as best it can. Here you can see when it gets small enough, my reports now are stacking. So here I have one report and another report.

 

[pause]

 

Maybe a concern or one issue that I have with the theme is that some of the contrast in the theme are almost too light for me. I almost wished there was a little more contrast in some of like this, the striping of this report. You’ll see also when I’m adding the application builder, you’ll see that the new theme sometimes degrades or a little bit light for me. I wish they would darken up a little bit.

 

Copyright SkillBuilders.com 2017

×
Transcript

APEX 5 Theme Roller Demonstration

Introduction to APEX 5 Lesson 3

 

ThemeRoller

 

>> Tyson:  Here’s where it gets really cool. It’s likely that you want to have your own custom theme. You want your application to be branded to your company.

 

Say all your applications need to be green. Previously what you likely did is you went through and when you create your application you looked for a theme. There was one green theme that you could pick and that was it. Then you try to customize that.

 

[pause]

 

I know currently looking at the universal theme here, it’s blue. It doesn’t have to be.

 

One thing that we’re going to look at here is known as the ThemeRoller. This thing is really awesome. Major props to the APEX team for getting this thing set up. This is way cool.

 

What does it do for us? How is it helpful? You can see currently I’m using the style blue and I need to point out now that themes now have styles. In other words, you can have the same theme but you can have a blue or red or a green style, or you can just go ahead and make your own. How do we do this?

 

[pause]

 

Quite simply, here you have different options that you can pick. I’m just going to go to global colors and I’m just going to pick the header accent. Here I can just start picking colors. You can notice my application instantly changes.

 

[pause]

 

I go a little bit darker. I kind of like this one. If we want to, we can change more than just this header accent. We can go into containers. Containers have something called a border radius, which we can tweak with a little bit. Those of you might be wondering what this is affecting, it’s actually this little rounded corner here. So if you want more of a larger rounded corner, you can do that. I like the two pixel rounded corner myself. Let me leave all these other stuff the same.

 

[pause]

 

What I’m going to do now is I’m going to click “Save As” and here the style name is going to be called blue copy. I’m just going to call this deep blue. Save.

 

[pause]

 

This style has been saved but when I click “Cancel,” notice that my theme goes back. How do I make that theme current? What I’m going to do is I’m going to navigate to my application.

 

[pause]

 

And I’m going to navigate to my shared components.

 

[pause]

 

Here I’m going to navigate to my theme.

 

[pause]

 

Here you can see I have my universal theme 42. If I scroll down to the very bottom of this theme way, way, way down at the bottom, you can see here are the different styles. Notice that we have blue, deep blue, gray, steel blue. Quite simply, all we have to do is go find the deep blue that we created, edit that or just click on that link, and there’s a little option “Show All.” There’s a little option here where it’s current, “Yes.” So now my application is going to show up in my deep blue theme.

 

But there is one thing here that I want to point out that makes this even cooler. The ThemeRoller uses something which is known as less. You can see it here. It’s including a file called standard.less, which is essentially a preprocessor for CSS. It lets you use things in your CSS like variables. So here we have a variable with a value and here we have the border radius variable with a value.

 

What I could do is I could actually come in here and start entering JAVA script object notation to style my theme strictly or simply with text. But be careful if you come in here and try to modify this stuff directly. For instance, you might notice that these changes here are the header accent color and the border radius with the things that I modified using the ThemeRoller. There’s a note here which is kind of hard to see but I can zoom in. It says “Saving a theme style in the ThemeRoller will generate the JSON configuration.” So you don’t actually need to enter this. The ThemeRoller will enter it for you.

 

Copyright SkillBuilders.com 2017

×
Transcript

Integrating Font Awesome (scalable vector icons)

Introduction to APEX 5 Lesson 5

 

Font Awesome, Navigation Entries and Lists

 

>> Tyson:  Some of you may have noticed that I have some icons over here on the left-hand side for my different links. One thing that is I truly enjoy about APEX 5.0 is that they are using something called Font Awesome. I’m going to navigate to a link.

 

[pause]

 

These are the Font Awesome icons. APEX is not using version 4.3, it’s currently using version 4.2, but if you want to leverage the Font Awesome icons or you want to customize and have different Font Awesome icons in your application, one thing that you could do is if you have an idea of the icon that you’re looking for, like for instance, I’m going to type “gear” and notice that it comes up with – it’s actually called cog but there are some aliases here for that particular icon. I’m going to navigate to this icon.

 

Since APEX is using Font Awesome, all I need to do is I just need to copy this class. This is a CSS class that I can leverage in APEX. I’m just going to copy this cog (fa-cog) and now I’m going to go to my builder. I’m going to add the cog to this employees item here, this employees list item.

 

[pause]

 

To do that, I’m going to add up my application, I’m going to go to my shared components, I’m going to go to my navigation menu. And here I have my desktop navigation menu. This is that left-hand menu. I’m going to go to my employees item or the employees entry in the navigation menu. Here there’s ability to add image or class and I’m just going to paste the Font Awesome cog icon. Apply changes.

 

[pause]

 

Now if I refresh my application you can see that I have a cog powered by Font Awesome. The great thing about using the Font Awesome stuff is that it scales very well. So here you can see this is the same class at a very large size all the way down to the default smaller size that we see here.

 

[pause]

 

Here’s actually some code for you to copy. You can use the “I” tag and the class provided here to get the Font Awesome icons.

 

Now one thing that you may have also noticed is that tabs aren’t along the top anymore. There are tabs that are actually listed along the left-hand side. I actually shouldn’t be calling them tabs anymore because they are not. The option to use or using tabs as the primary navigation element at your applications is an option now. So I believe now it’s just called navigation entries and in this case I’m actually using a list.

 

I highly encourage you to move away from tabs and use lists. The reasoning for that is that lists are more flexible and there are some works that you may have encountered when using tabs that you can just avoid with lists. One of which being just kind of as an FYI is that when you click on a tab, it’s actually submitting the page. But you don’t always want to submit the page when you’re just trying to navigate from one page to the next. With lists entries, you’re strictly just navigating, just linking from one page to the next.

 

Copyright SkillBuilders.com 2017

×
Transcript

Modal Pop-Ups in APEX 5.0

Introduction to Oracle APEX 5 – New Features

 

Lesson 6 – Modal Page

 

>> Tyson:  Let’s go ahead and we’re going to look at some interactions between pages that I think are really cool. I’m sure you have created a form and report, a reform on table with report and this interaction should be familiar to you as APEX developers.

 

I click the edit link and I go to the detail page. I click “Cancel” and I go back.

 

One thing that APEX 5 added that is really awesome is you can very easily make a page modal. If you’re not familiar with the modal is, basically that’s just a popup that comes to the front of the screen.

 

What I’m going to do is I’m going to navigate to this detail page. I want this page to be a modal. So what I’m going to do is I’m going to edit page 3. Notice it sent me back to this tab here and it updated the tab to be on page 3.

 

[pause]

 

I just want to point out, over here on the right-hand side, if you’re using the page designer, which that’s what this is, whenever you click on something, you’re going to have property show up on the right-hand side. So if I click on the employee details regions, I’m going to have properties on the right-hand side for that region. If I click on the P3_ENAME item, I’m going to have properties for the P3_ENAME item on the right-hand side.

 

So at the very top is the page itself. That’s kind of a latch to get the page context. And you’ll see here there’s something called page mode. Quite simply I can change this to modal dialogue.

 

[pause]

 

Save. Now what I’m going to do is I’m actually going to navigate to page 2 which should be my report.

 

[pause]

 

I’m going to click “Run.” Then now when I click “Edit” on KING, the form now pops up in a modal. I changed one property on one page and it modified the link to that page and it changed the details of the target page. So it knows it needs to render in a modal view. How cool is that?

 

I’m also going to take a second here – and this is really cool. I’m going to make it cancel and I’m going to talk about this real quick. The developer toolbar down at the bottom has a context of editing page 2. So it says, “Edit page 2.” I’m going to click this link so there’s a modal popup powered by APEX and now it says, “Edit page 3.” So it’s actually going to edit this popup which is what I would like to edit.

 

That’s a major improvement that the SkillBuilders modal could never do. This is a really clean, awesome way to get to editing this popup. I click “Edit” and now I’m editing the modal popup page.

 

Copyright SkillBuilders.com 2017

×
Transcript

Page Designer

Introduction to Oracle APEX 5 New Features

 

Lesson 7 – Page Designer

 

>> Tyson:  Let’s take a second here to talk about how we’re going to work on this form. There are some really nice drag-and-drop features.

 

So if you want to reorder items, you can just click and drag. ENAME has now been moved. You can see I have some buttons here. You can see I also have my item types showing up.

 

[pause]

 

Hey, Dave, are there any initial questions on the Page Designer?

 

>> Dave:  You bet. What’s the difference between item level and region level buttons?

 

[pause]

 

>> Tyson:  That is one thing that it seems like so small but it’s one of my favorite changes about APEX 5. The answer to that question is there isn’t. There is absolutely no difference between item level and region level buttons. There’s just a button.

 

So if you’ve ever had to go through the pain of changing a page item button to a region item button, you no longer have to do that. A button is a button.

 

[pause]

 

So if I go and I click on one of these buttons, one thing that I really like is that this detailed menu over here on the right-hand side is always going to look the same for no matter which button you click on. The behavior of how a button is going to work is consistent, and so there’s no gimmick or there’s nothing different about the buttons.

 

[pause]

 

Let me click “Save” here. Here you can see I still have the button name “Save” which is going to be the request when I click the button. But one thing that I think is pretty cool is that if I go up here and I want to add a new button.

 

[pause]

 

I want to add a page component. And, actually, I think I should be able just to click here and create button.

 

[pause]

 

I actually went ahead and created a button. It says it created down on the below region section. I’m going to go ahead and move this button. I’m just going to put it in this little Help section here. Now I can just go ahead and “Save To” button.

 

It’s pretty easy to go ahead and add another button or add components. And I can drag and move this button around.

 

One thing that I want to point out is that these changes have not been saved yet. So if I cancel this and run this again, notice that that “Save” button isn’t showing up yet. All these changes are stored here on the Client. They haven’t been pushed to APEX yet.

 

I’m going to go ahead and click “Run” and here it’s doing some processing here.

 

[pause]

 

Unfortunately, the alert is not showing up quite as nicely as I would have hoped. But basically, this is telling me that the changes have now been persisted to the database. So I should now, when I click “Edit,” I see my “Save To” button.

 

That’s really cool. You can make changes and you can actually back out of your changes. You have an undo feature, if you will. So if you’re working on something and things just start going awry, you can just say, “You know what. Hold that. I don’t know what I did but things are looking really weird. I’m going to back out.”

 

That right there saves a lot of time because if you worked with APEX before and you’re making a lot of different changes on the page and the dots aren’t connecting as you thought they would, sometimes it’s nice to be able to back up and say, “Hold on. Let me start over.”

 

[pause]

 

Let me go back to editing. I want to go to page 3.

 

[pause]

 

One thing that’s really, really cool about this, the Page Designer, is that if you’ve ever had to convert an automated row fetch and row processing to be a custom PL/SQL logic, one thing that you’ve had to do is you’d have to go into each item and you have to change the source from being a database column to be static assignment, and you can do a pretty good job in some of the utility reports at the workspace or page level to be able to edit multiple items at the same time. You don’t have to leave the page anymore to do those types of really cool things.

 

What I can do is I’m going to select the EMPNO item and then I’m going to hold Shift and click the DEPTNO item. I have now selected all of these items.

 

[pause]

 

If you look over here on the right-hand side, you can see all these different properties that can be modified. I would avoid the blue stuff whenever possible because – actually, I don’t even know if it will let you update this because sequence is something that needs to be unique. Database column, you’re likely not going to be setting all these to the same database column.

 

However, you do want to change the type to static value. I updated all of these items at the same time. You’ll also see that they immediately turned red. Let me go here.

 

[pause]

 

Here it’s telling me that the page item-P3_EMPNO-source-static value is required. So it is going to bark at me. I may go back, set this to database column. Static value. And then I can modify these other details here.

 

Point being is that I can very quickly get to changing some of the properties on multiple items at the same time. If I do something that is maybe going to break my application or break my page, that APEX will try to warn me as best it can over here in Messages.

 

[pause]

 

If for whatever reason, I want to try to find something on my page, previously on the upper right-hand corner there used to be a Search box that you could use.  

 

Copyright SkillBuilders.com 2017

×
Transcript

Plug-Ins

Introduction to APEX 5 New Features

 

Lesson 8 – Plugins

 

>> Tyson:  Now, very quickly, we’re going to navigate to plugins.

 

[pause]

 

Here is a plugin that you can find. It’s called the slide tooltip plugin. It’s in the sample application. I’m just going to touch on a few things for those of you who may be are developing plugins or want to get into building plugins, or if you’re using plugins, how your experience is going to get better as new plugins are created.

 

One thing that is really, really awesome to me is that here we have something, a plugin, that looks like a report. It has tabular data in addition to a tooltip which is the extra data.

 

[pause]

 

But you would likely get all this information from a query. Previously, if you had tabular data in a plugin, there was no way of looking at or modifying columns individually unless the developer of that plugin did a whole lot of work to allow you to do that. And the experience wasn’t the same as what you come to know with default APEX reports.

 

[pause]

 

Let me show you what I’m talking about. This plugin, you can now see, exposes all the columns that it has access to. I can go in and I can sequence how these columns are going to show up. I can change the heading of these columns. I can say whether or not I want this to show so I can say, “STREET ADDRESS 2, no. I don’t want you to show up.”

 

[pause]

 

Let me go back to grid layout so I can see what my page looks like.

 

[pause]

 

Run my page. It’s going to apply these changes.

 

You may get this error every now and then. It’s not really an error, just more of an alert. It says, “The changes have been saved but it failed to refocus on the new tab.” So I’m going to click on “Try Again” and it’s going to let me refocus on the new tab.

 

It’s hard to tell but the fourth line in the tooltip is no longer CUST_STREET ADDRESS 2. It is no longer showing up. So you modified how this plugin is behaving and how a column of this plugin is behaving in a more APEX declarative fashion.

 

[pause]

 

I just want to show you as an already plugin developers out there, I’m going to navigate to shared components. I’m going to go to plugins. I’m going to find the slide tooltip plugin.

 

[pause]

 

Don’t worry about the code so much here. But do you notice that it is highlighted? We can see that there is some styling here. Remember this is an early adopter, so the spacing here is a little goofy but that’s okay. It’s early adopter, we know that things aren’t always going to be perfect. But do know that there is syntax highlighting. And you’ll see more syntax highlighting in all of the source of the different APEX items.

 

But one thing that I want to show you is here. This is the option that allowed this really cool stuff to happen. It says, “Has region columns” and “Has heading column attribute.” By checking this on your plugin, basically what this does is APEX will go ahead and query the data for you and give you all the data and headings attached to the payload that it delivers to you to leverage all the built-in APEX attributes.

 

[pause]

 

One last thing I want to touch on here in plugins – this isn’t plugin specific but it’s something that I think is really cool. I’m going to refresh this and see if it will fix the formatting here. It did. Very cool.

 

[pause]

 

One thing that we now have access to is there’s a package – this is kind of small, let me see if I zoom in. There’s a package called APEX JSON. APEX team has given us the package to use if we need to generate JSON output.

 

Notice here, you can see that it’s coined the apex_json.open object. It’s writing some values. Here it’s saying open_array. Now it’s writing an array of values.

 

That’s pretty cool in that we now have a package to help generate JSON. There are some other utility in that package that we’re not going to talk about but it’s really cool.

 

Some of you might be asking, “What is JSON? What does it look like? Why is it important? Why would I use it?” If you look at this plugin – let me restore. I’m going to open up my network tab and I’m going to refresh my page. Here you can see this is the JSON structure that was generated.

 

[pause]

 

This is the structure for Bradley Eugene. Here’s all the other information related to him. Pretty cool. APEX helped us generate that.

 

[pause]

 

User experience with plugins, as well as developer options are becoming way better with plugins.

 

Copyright SkillBuilders.com 2017

×
Transcript

Interactive Reports

Introduction to APEX 5 New Features

 

Lesson 9 – Interactive Reports

 

>> Tyson:  I’m going to go ahead and click on Interactive Reports. I want you to notice here I have an interactive report on some employees and I have an interactive report – just a very long report – of IDs. This is an interactive report and this is an interactive report. So, yes. You can have many interactive reports on the same page.

 

There’s one really cool feature that just works out of the box. I want you to pay close attention to the headings here.

 

[pause]

 

As I scroll down, notice that the headings scroll down with me. Now watch as I encounter the second interactive report. It now shifts. And now the second interactive report heading scroll is locked. As I scroll back up, it switches.

 

One thing to just take note of is that interactive reports now have the capabilities of pivoting on data. I’m going to click this little pivot button. I’ve pre-defined the pivot which is basically looking at jobs and their salaries across different departments. You can see how much clerks are getting paid in accounting versus research and sales. If you want to configure this, I’m going to click “Edit Pivot.”

 

[pause]

 

This is what the menu looks like. Notice it’s a little modal popup, which is much nicer than before. So you can actually move this down and look at your report while you edit your pivot that you can see here. I’m pivoting on job, so you can see here the jobs listed across the top. For the different rows, I want to look at department name so you can see the department names being listed here. Then I’m saying I want to sum the salary. This is just how much we’re spending on different job types in the different departments.

 

[pause]

 

You could use something like average so you can see the average salary. This is really nice because this is kind of getting into business intelligence, analytics. Interactive reports are never going to be a substitute for business intelligence, but this is a really cool feature. But one thing that I do want to point out is notice that the pivot table does not have the heading scrolling. Maybe that’s something that’s going to come later. I’m not sure. But remember the difference here is that the ID column will stay on this long report.

 

One other thing is that because we have interactive reports, multiple interactive reports on the same page. If I was to do something like filter – we’re going to do on employee name = Adams. We’re going to filter this report, so we’re looking at Adams. We’re going to filter this report so that we’re just looking at ID5. Apply.

 

[pause]

 

If I was to leverage the clear cache or reset or clear interactive report option here, so I’m going to say RIR for reset interactive report. Notice that it’s going to reset everything on the page.

 

Some of you might be wondering, how do I link to a given interactive report? You may remember this functionality here. Let me copy this.

 

[pause]

 

You may be used to this syntax here where you say interactive report = and you provide a column alias and a name. Let’s see what happens when I try to use this.

 

[pause]

 

It tells me that report does not exist. Now you need to make sure that you specify a name of the interactive report that you would like to target. What that means is that these different interactive reports need to have an ID. How we would change that is it would be this plus static ID.

 

[pause]

 

I currently am having an issue with this particular part working. But I just want to add that now we need to add the static ID here.

 

If you want to know what the static ID is from your interactive report, if I navigate to my EMP report –

 

[pause]

 

And go down and we can find static ID. So I should be able to use EMP. The idea here is that I can use EMP_REPORT like this and it should work. The only issue here is that –

 

[pause]

 

Nothing happened. Again, this is an early adopter. Actually, let me put the percent sign here. That totally broke it.

 

[pause]

 

Before we go is that interactive reports have been overhauled from the ground up. So if you have any custom styling at all of your interactive reports that are using the old interactive report classes and IDs, that has all been changed. So that’s no longer going to work.

 

So what you’re going to have to do is you’re going to have to inspect elements here and look at the new classes and the new IDs. For the most part, it has been pretty good one-to-one mapping as far as what the new classes and IDs are. It’s pretty easy to make those changes, but it has all been changed. So any custom interactive report styling no longer is going to work in APEX 5.

 

>> Dave:  I got to give you one more question. Can I download an interactive report to a different type such as XLS, RTF, PDF, doc, etc.?

 

>> Tyson:  Yeah. If I got o “Actions” and “Download,” here you can get PDF. PDF basically is going to be produced however you have your APEX instance configured to get that PDF. It could be the ORDS version 2.0. (Oracle REST Data Services). That could be the iPublisher, it could be JasperReports. It all just depends how you have that configured.

 

As far as XLS, I believe there’s a plugin out there that does that for you. But there’s no XLS out of the box. It had been kind of problematic.

 

>> Dave:  Okay, great. Tyson, a fantastic presentation, incredible amount of knowledge that you have and you share with the group. Thank you very much.

 

>> Tyson:  Thank you, everyone, for attending.   

 

Copyright SkillBuilders.com 2017

×
Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!

 

×