When I launch a custom Framework page, i would to be able to activate one of the tabs programmatically depending on certain conditions. Am i stuck using javaScript or is there another way?
There are a few posts already on this question with answers:
This is the best answer: How to conditionally hide PXTabItem inside an Acumatica screen?
Also, searching hide tab you will find what you need.
For information, this can be achieved statically with PXTab control SelectedIndex property:
You can do this using a Javascript function and attaching it to the corresponding client event on your Acumatica form.
Here, I wanted the tab to change based on the index of the active cell in a grid. So I set the aftercellchange and cellclick grid-events(client events) to my gridclick Javascript function. Finally, added this script to my aspx page:
<script type="text/javascript">
function gridClick()
{
var index = px_alls["grid"].activeCell.getIndex();
if(index<=2) px_alls["tab"].items[0].select();
if(index>=3 && index<=5) px_alls["tab"].items[1].select();
if(index>=6) px_alls["tab"].items[2].select();
}
</script>
Related
I'm writing a Primefaces 5.1 portlet.
It consists in a unique page containing a panelMenu, and I need that it starts with any panel collapsed everytime a user change page (on page loading).
But, if I open a panel, then change page, it will start showing that panel still opened.
I wasn't able to find any option to achieve this goal (e.g. collapsed=true, ignoreCookie=true or something similar).
The only solution I found was the following Javascript code:
PrimeFaces.widgets.myPanelMenu.collapseRootSubmenu(PrimeFaces.widgets.myPanelMenu.headers);
The problem is that this code will collapse any opened panel (so on page loading user is able to see panel menu collapsing animation) but it seems it doesn't store this state in its cookie/localstorage... the result is that on any page loading user can see this animation.
I'm sure it doesn't save its state, because the only way to "solve" the problem is to manually re-open and re-collapse the panels... then, on following page change, these menus start closed (and there is no animation).
I also tried to use PrimeFaces.widgets.sideMenuPanel.saveState() after collapsing, but with no success.
Do you have any idea about?
Thank you...
I found a solution to the problem.
If you read my discussion with Kukeltje (comments on my question), you will find that latest Primefaces' versions will solve the problem.
Otherwise, if you want to avoid upgrade or modify sources, and you need a quick fix based on Javascript only please read the following part of the answer.
It directly works on the component's state using JavaScript.
First of all you need to have a variable reference to your component:
<p:panelMenu model="#{menuBackingBean.menuModel}" widgetVar="sidePanelMenu" />
Then you should add the following JS code on document ready:
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
// following line is commented because it never should be necessary is not necessary (unless unexpected situation I never verified)
//clearSidePanelMenuPreferences();
// 2. Call the "clear preferences" actions on click on two tpe of links: first level are the panel link (used to open/close the menu) and second level are the destination links
// We need to fork also on the first level links to be sure it works after user clicks there then exit from the page in another way
panelMenu.headers.children("a").click(function(){setTimeout(clearSidePanelMenuPreferences, 500)}); // setTimeout is necessary because this event should be fired after preferences are written
panelMenu.headers.siblings().find("a").click(function(){clearSidePanelMenuPreferences();});
The function called to clear preferences are the following:
function clearSidePanelMenuPreferences() {
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState(); // store this information
}
Hope it helps
Please check this block of code
PF('myPanelMenu').headers.each(
function(){
var header = jQuery(this);
PF('myPanelMenu').collapseRootSubmenu(header);
header.removeClass('ui-state-hover');
}
);
I prefer to do this in order to execute this method only once and keep the menu option selected.
$(document).ready(function() {
if(location.pathname == "/cotizador/" || location.pathname == "/cotizador/faces/login.xhtml"){
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState();
}
});
I have two webparts on a Project Details Page, webpart #1 is a default form webpart, webpart#2 is a custom webpart with custom form.
Now when I click on "Save" in ribbon it fires the save event for Web Part 1.
My question: Is there a way to capture the save ribbon event, so I can trigger the save event of my custom web part ?
Thank you,
We can specify the OnSaveHandler at runtime as follows,
SPContext.Current.FormContext.OnSaveHandler = btnSave_Click;
You can try to achieve this using javascript. You need to add your custom script block with function PreSaveAction.
Something like this:
<script>
function PreSaveAction(){
//Do your stuff
}
<script>
Please refer to this post.
i'm using color picker from http://jscolor.com/
i'm trying to attach it to some dynamic inputs, but to no avail. dynamic inputs in terms of, on page load the input doesn't exist, only after the user click on something the input will become available. for example, I have a rows of data, and each row has different background color. this row of data are loaded using ajax. at the end of each row, there's an edit button. by clicking the edit button, it will display an input text box for the clicked row. I want to call the jscolor picker when the user clicks on the input text box. how can I do this?
thanks
For some reason jscolor.init() did not work for me, and looking at the code I called
jscolor.installByClassName("jscolor");
function.
So...
$(document).ready(function() {
jscolor.installByClassName("jscolor");
});
Hope it helps
I just had this problem too but luckily it's easy to fix. You need to (re)init jscolor after you have dynamically created your inputs:
jscolor.init()
This helped me
<script>
$(document).on('click', '#myPickerId', function () {
var obj = $(this)[0];
if (!obj.hasPicker) {
var picker = new jscolor.color(obj, {}); //
obj.hasPicker = true;
picker.showPicker();
}
});
</script>
In my case, the picker control was dynamic because it is inside Knockout.js 'with' statement which hides and recreates the picker when it needs.
Got the same problem upon adding input fields dynamically
Managed to make it work by calling
jscolor.install();
PS: jscolor v2.4.5
As of 2020, the original problem should be solvable by dynamically creating an input element, and then calling new jscolor(input). Using JQuery (you could use vanilla JS as well):
var color_input = $('<input class="jscolor" spellcheck="false">');
new jscolor(color_input[0]);
This will make the popup picker appear on click, and everything appears to work just fine. However, you cannot manipulate it programmatically. To set the color using the objects above, you would normally use a method like: color_input[0].jscolor.fromString("#B7B7B7"). But that will fail for dynamically created objects, as color_input[0].jscolor is undefined. I believe this is a bug in Jscolor (and probably very easily solvable), as the missing object is actually available with color_input[0]._jscLinkedInstance. So you can just set the object yourself on instantiation with:
var color_input = $('<input class="jscolor" spellcheck="false">');
color_input[0].jscolor = new jscolor(color_input[0]);
And then everything looks to be working as expected. Hopefully this helps someone else that comes across this answer page as I did.
I have an Xpages application that pulls data from another .nsf file. I have a view panel linked to a view in that db. The view has documents with several different forms in it. I want to be able to open each document in it's own form(xpage).
How do I write a computed At Runtime, open selected document using: statement that will select the correct Xpage to present the document.
If you use the Data View component instead of a View Panel, you can compute the pageName attribute, referencing the var attribute to return a different value for each row based on the document that row represents. The flexibility of the Data View component also makes it easier to make your app look more like a modern web application and less like an Excel spreadsheet. As an additional bonus, the mobile theme invokes a renderer that makes each Data View instance look like a native mobile list, so using Data Views instead of View Panels simplifies mobile development.
You have 2 options:
use "use xpage associated with form" and edit the form's property
use a SSJS formula to compute the Form. You provide a variable name in the view control var to access a view row as XSPViewEntry. If the Form is in a view column even one you don't display you use .getColumnValue otherwise getDocument.getItemValueString
Does that work for you?
Maybe this mothed can help you: Unable to get document page name for
Hope this helps
Mark
I had a similar problem today. I use only one form but 3 different xpages for associated with this form. I have 3 different document types in the view. I used rowData the get the type of the document.
try{
var v=rowData.getColumnValue("form");
if(v.indexOf("x")> -1){var page ="x.xsp"}
else if(v.indexOf("y") > -1){var page = "y.xsp"}
else{var page = "z.xsp"}
}catch(e){
var page = "x.xsp"
}
So to your view you can create a column with the value of the form and you can use it.
I have used the extension library Dynamic View control which has an event you can code to get a handle to the NotesViewEntry which was selected. See the demo database page Domino_DynamicView.xsp and the Custom Event Handler tab for an example.
Note, in 8.5.3 (I have not upgraded yet) if you add or edit the eventHandler for onColumnClick it will be added to the XPages source as an xe:eventHandler. It needs to be an xp:eventHandler to work. The way to do it is to copy the code in the source from the exiting event and delete it. Recreate the event and update the code. Then go back into the source and change the tags within the eventHandler to xp:.
I have a button, In Button on click event has set of codes,
I want to update two particular element using Server side Javascript.
But these are in different tags...
I want to update an element using SSJS code.
I am using Lotu notes 8.5.2.
Please check out this blog by Tim Tripcony, It will show you how to update two panels via partial refresh.
http://www.timtripcony.com/blog.nsf/d6plinks/TTRY-84B6VP
basically the code for two refreshes looks like below.
XSP.partialRefreshGet("#{id:div3}", {
onComplete: function() {
XSP.partialRefreshGet("#{id:div4}");
}
});
You should update the datasource for the components and dont try to 'refresh' them. If you realy want to update their values you use
getComponent(x).setValue();
Another approach would be to just use the partialrefreshget()..