Change IR "Primary Report" label - oracle-apex

Apex 4.1.1.00.23
Can I change the IR default Reports label from "1. Primary Report"?
I found this code, and it works for the page load, but changes back to the default when the page changes or other saved reports are picked.
<script type="text/javascript">
$(document).ready(function() {
changeIRText('1. Default');
}); // end of ready function
function changeIRText(pText){
$('select#apexir_SAVED_REPORTS').find('option').each(function(index,elem) {
$(elem).text(function(i, text) {
return text.replace('1. Primary Report', pText);
}); // end of changing text
});
}
</script>

When the report is paginated, the html source is also replaced. You need to bind to the apexafterrefresh event on the IR region aswell, or create a dynamic action which fires on the "After Refresh" framework event, with triggering element the IR region.
You can best achieve a manual bind through assigning a static id to the IR
$("#my_ir_report").bind("apexafterrefresh", function(){changeIRText('1. Default');});
Code in page attributes
Rightclick the page and select edit.
Go to the "Javascript" region.
In a dynamic action
Put the javascript function in the page attributes. This is good for code reusability. However, if you don't use it outside the dynamic action, consider simply putting the code in the dynamic action. There is less harm though, as when you will see the dynamic action and inspect the code it runs you'll see that it calls a function, and you'll know that that will be in the page attributes or an external javascript file.
Create a dynamic action, type Advanded. Fire on after refresh, and select your IR region.
Dynamic action properties:
In the true action, select Execute javascript as action. Put in your code. When the dynamic action has been created by the wizard, go back into the true action properties and make sure you check the 'Fire on Page Load' checkbox! This will make sure that not only your code will run when the report is refreshed, but also when page loading is complete, and saves creating another dynamic action!
True action properties:
In closing
Being unfamiliar with javascript is fine, you'll pick it up over time. But do pick up some dynamic action knowledge! Don't cram script tags over your page, they'll be much harder to maintain and harder to remember if and where they are!
Oracle tutorial on dynamic actions
Skillbuilders youtube tutorial on dynamic actions

Related

Oracle APEX - hidden regions flash on page refresh

On my page there are several region that are hidden or shown based on a condition.
I set a variable calculation before regions and then on change of that variable I show/hide various regions. Everything works as expected but I've noticed that when I refresh the page, for a split second I see the hidden regions flash and then disappear. Any way to fix that?
What happens is that the DOM is rendered and once the page is loaded, the dynamic action fires. There is a brief moment between the page fully rendered and the dynamic action firing and that is when you see the component flash. All a dynamic action of type "Hide" does, is set the css style display:none; on the component.
A very simple workaround to prevent the flashing is to set "Custom Attributes" to style=display:none; for the region that should be hidden on page load. That way the component will not show but immediately be hidden.

hide HIGHLIGHTS presets from end user

Is there a way to hide thisĀ¹ from users?
even though I like to use this very much, it's kind of irritating to have these tags at the top of the report.
(1) It's the thing that appears when you do ACTION/FORMAT/Highlight on an interactive report. It also gives user the ability to edit highlighting conditions, when they click on it.
Inspect the element in the browser dev tools. Notice that the container div around the interactive report filters/formats has a class a-IRR-controlsContainer. With this info you can get to work.
Create a dynamic action:
Event: After Refresh
Event Scope: Dynamic (if you set this to static they will reappear on partial page refresh)
Add a true action:
Action: Execute javascript code:
Code:
$('.a-IRR-controlsContainer').hide()
Fire on initialization: true
Note that if you do this, it could be confusing to users because they can add a filter but no longer remove it (since that control is hidden...)

How to enable dynamic action fired in the condition of page loads in Interactive Grid?

I created a dynamic action which is the execution of Javascript code and enable the Fire on Initialization function.
However, according to the documentation:
"Initialization has a slightly different meaning depending on how the dynamic action is defined. For dynamic actions defined to fire on interactive grid columns, this specifies if the action fires when the interactive grid row is activated for editing. For all other dynamic actions, this specifies if the action fires when the page loads."
Currently, I have to click a certain cell of the grid so that the grid row is activated for editing and the fire on initialization can be triggered.
Does anybody know how to enable the fire on initialization instantly when the page loads?
As your comments suggest, you also want to trigger the same JS, which is executed on a page switch, when the page is first loaded.
To do this, you can simply create a dynamic action, which triggers on page load, and executes the same JS code.

ember.js beginner advice required

I am attempting to learn ember.js to produce a simple-ish web application. I have read around the subject and completed the basic tutorial on emberjs.com . So far, I have managed to create the beginnings of an API using PHP and I have been able to retrieve that data into my fledgling application. So far so good.
As a starter, I wish to retrieve a list of users from the server and populate a select with these values. The select is to sit on the menu bar and the selection from this drives the rest of the data for the application. I have placed the model in models/users.js. The application menu I have defined in templates/application.hbs (not sure if this is considered correct or not).
I am unable to get the users data for the select retrieved from the server unless I visit the users route that I have also setup. How can I ensure that the users data is populated at application initialisation? How would I apply/filter the rest of the application data upon selection from this component - would I need to set a global variable or something?
Additionally, I am using materializecss, which requires $('select').material_select(); to be run in order to render the select input. I have this as:
$( document ).ready(function(){
$('select').material_select();
});
in templates/route.js and works fine on initial page load, but upon navigation to another area and back again, the select is not rendered, and from what I have read, I need to call material_select() again, but I can't for the life of me work out where this call should go.
If anyone is willing to take the time to help me better understand things, I will be very grateful.
Cheers
Tim
Preloading Clarification
I wish to have a select box on the main menu bar (menu-bar component). The user will use this to select a user. All content in the app will be filtered to the currently selected user. I currently have an API endpoint (/users.php) which returns the required data, but I am only able to get my application to call this when I visit the users route, which obviously I won't be doing when the app loads initially. So I am thinking I need to preload the data somehow, unless there is a better way that I am not aware of?
Create a component for menu and put the component in application.hbs
And in component put the materialize stuff like this : (notice to the place)
//components/menu-bar.js
didInsertElement(){
this._super(...arguments);
Ember.$( document ).ready(function(){
Ember.$('select').material_select();
});
}
And
//templates/application.hbs
{{menu-bar}}
{{outlet}}
UPDATE
Create a service holding current user selection and use it in other places that you want be changed by changing the user selection.
These codes is just for showing that the solution for what you want (changing the other parts of app based on changing the selected user in menu) is services.
//services/current-selection.js
...
selectedUser: null,
...
and
//components/menu-bar.js
currentSelection: Ember.inject.service(),
actions: {
selectUser(user){
this.set('currentSelection.selectedUser', user);
}
}
and in another place you want to be notified when selection changed :
//components/user-info.js
currentSelection: Ember.inject.service(),
and corresponding template
//templates/components/user-info.hbs
{{#if currentSelection.selectedUser}}
<span>Current Username: <strong>{{currentSelection.selectedUser}}</strong></span>
{{/if}}
Update For pre-loading users
Actually it's not pre-loading
In menu-bar component you load a select box and populate it by calling a service to backend. If you put this component in application.hbs you could ensure what you want is satisfied.
//components/menu-bar.js
store: Ember.inject.store(),
users: Ember.computed(function(){
return this.get('store').findAll('user');
}),
OR
In application route model hook you fetch those users and pass to component like {{menu-bar users=model}}
And for these two options you can use users in menu-bar template.
But pay attention to that if the users count is a lot, this is very bad for performance or UX. If your users are a lot it's better to use from a autocomplete component

How to ensure the same controller instance is referenced in two different places in ember

tl;dr: Ember is creating two instances of an ArrayController when I want only one. How do I ensure that my code is always referencing the same one?
The scenario
Using ember, I am trying to create a section of a page where potential buyers can select from two sets of options, then click a button to accept those options and redirect to another page based on their choices. Example:
However, when I click the button, it uses whatever was selected when the page first loaded, ignoring any actions in between.
Let's work through the code
When you click the Reserve Now button, it triggers an action on the LessonPackagesController:
#handlebars template
<a {{action bookLesson on="click"}}>Reserve Now</a>
Here's the action it triggers: (If you don't understand emberscript, imagine it's just pseudocode... that runs)
#LessonPackagesController
bookLesson: ->
window.location = #bookingUrl
The location it points to is currently outside the ember application, so I don't think transitionToRoute and its sibling methods are viable.
#bookingUrl is a computed property on the controller.
#LessonPackagesController
+computed chosenPackage lessonType
bookingUrl: ->
url = "/instructors/#{#id}/lesson_bookings/new"
url += "/#{#lessonType}"
url += "/#{#chosenPackage.name}" if #chosenPackage
url
To simplify, I've started out by setting #lessonType to a default ('private'), and we don't have to worry about how #id is being fetched, because it's working.
Before we get into the details of how #chosenPackage is updated, I put together some code that logs every time #chosenPackage is updated, confirming that both #chosenPackage and #bookingUrl are being updated as expected.
#LessonPackagesController
+observer chosenPackage
yolo: ->
console.log(#bookingUrl)
Whenever I click a lesson package, for example the six-lesson package, I see the following in my console: /instructors/58/lesson_bookings/new/private/six. This is exactly as I expected.
However, when I click the Reserve Now button, I get the following: /instructors/58/lesson_bookings/new/private. This is the #bookingUrl that exists before the #chosenPackage is updated.
The plot thickens
In further tests, I put a #content log in 'yolo', and found that the content was... an empty array. Putting this together with the null #chosenPackage in #bookLesson, I surmised that I was accessing two different instances of LessonPackagesController. Here's how I access it when updating the #chosenPackage (which triggers the #yolo function):
class App.LessonPackageController extends Ember.ObjectController
needs: ['lessonPackages']
selectMe: ->
#chosenPackage = this
+computed chosenPackage
chosen: ->
this == #chosenPackage
chosenPackageBinding: 'controllers.lessonPackages.chosenPackage'
chosenPackage: ''
I know that all the LessonPackageController instances interact with the same LessonPackagesController because selecting one will deselect the current chosen package. However, it happens to be different than the instance which #bookLesson is called on.
How do I ensure those two instances are in fact one instance, the same instance?