I need to add a tabIndex to a page that contains several Dojo Combo Boxes from the XPages Extension Library. It seems that the tabIndex property is not supported.
The XSP editor says it is an "unknown property" and "not defined on tag ".
Does anyone know how to add this property?
Note: In this application, jQuery is not available to use.
This code works for me
<xe:djComboBox id="djComboBox1" tabIndex="3"></xe:djComboBox>
<xe:djComboBox id="djComboBox2" tabIndex="2"></xe:djComboBox>
<xe:djComboBox id="djComboBox3" tabIndex="1"></xe:djComboBox>
I never used them and have to DDE available yet but can you define the tabindex attribute via the attrs property list of the control?
Related
I am developing a azure extension in ibiza framwork. My application require tabindex in div.
But some how ibiza framwork sanitize tabindex.
How can i overcome this problem
To get tabindex added to your elements, map their behavior to either or in combination with the fxClick binding.
Ibiza sanitizes the tabindex from code due to some accessibility errors (not sure what are they).
So only probable work around for now is to use the anchor or button to get it workedout.
I'm having the following issue with the OpenNTF Bootstrap4XPages plugin: the NamePicker control uses a the Bootstrap renderer which displays it without the search field or the "add" field. I have raised this an issue on OpenNTF but in the meantime, I figured I would attempt to apply the ExtLib renderer for this control.
To date I have tried adding "com.ibm.xsp.extlib.OneUINamePicker" directly to the Renderer-Type property on the control (didn't work), added a renderer property set (taken from the ExtLib source) to the faces-config.xml (didn't work) both with theme enabled and disabled on the control.
So my questions are a) is this possible and b) if so, what am I doing wrong?
Thanks to Tim's comment, I had a moment of clarity in which I realised that I had been an idiot and had overcomplicated matters. I didn't need to worry about changing the renderer-type/adding a custom renderer. The simple answer was just to disable the theme for the NamePicker control which then forced it to use the ExtLib renderer anyway, giving me back the search button and both fields, albeit without styling.
The issue only occurred with the Bootstrap 3 themes. In the Bootstrap 2 themes, the correct renderer class was used.
I traced this down to a bug in the ExtLib theme file for Bootstrap 3. I've fixed it in the source code by setting the correct renderer class, so this will be solved in the next release.
See also: https://github.com/OpenNTF/Bootstrap4XPages/issues/59
I know how to enable the selected attribute from dropdown; I can use this code :
$('select').select2();
but my problem is how to disable it ? thx
The right way for Select2 3.x is:
$('select').select2("enable", false)
This works fine.
For those using Select2 4.x, you can disable an individual option by doing:
$('select option:selected').prop('disabled', true);
For those using Select2 4.x, you can disable the entire dropdown with:
$('select').prop('disabled', true);
The below code also works fine for Select2 3.x
For Enable Select Box:
$('#foo').select2('enable');
For Disable Select Box:
$('#foo').select2('disable');
jsfiddle: http://jsfiddle.net/DcunN/
To disable the complete select2 box, that is no deletion of already selected values and no new insertion, use:
$("id-select2").prop("disabled", true);
where id-select2 is the unique id of select2. you can also use any particular class if defined to address the dropdown.
In selec2 site you can see options. There is "disabled" option for api. You can use like :
$('#foo').select2({
disabled: true
});
As of Select2 4.1, they've removed support for .enable
$("select").prop("disabled", true); // instead of $("select").enable(false);
From: https://select2.org/upgrading/migrating-from-35
As the question seems unclear, I'm sorry if this answer is not directly related to the original intent.
For those using Select2 version 4+ and according to official plugin documentation, .select2("enable")is not the way to go anymore for disabling the select box (not a single option of it). It will even be completely removed from version 4.1 onward.
Quoted directy from the documentation (see https://select2.org/upgrading/migrating-from-35#select2-enable):
Select2 will respect the disabled property of the underlying select element. In order to enable or disable Select2, you should call .prop('disabled', true/false) on the element. Support for the old methods will be completely removed in Select2 4.1.
So in the previous answer's example, it should be:
$('select').prop(disabled,true);
As per select2 documentation: Click Here
If you wants to disable select2 then use this approach:
$(".js-example-disabled").prop("disabled", true);
If you wants to enable a disabled select2 box use this approach:
$(".js-example-disabled").prop("disabled", false);
I'm disabling select2 with:
$('select').select2("enable",false);
And enabling it with
$('select').select2("enable");
$('select').select2('enable',false);
This works for me.
I'm disable on value:
<option disabled="disabled">value</option>
if you want to disable the values of the dropdown
$('select option:not(selected)').prop('disabled', true);
$('select').prop('disabled', true);
Can the xpages extension library dialog box (xe:dialog) be open so that it's fields are read only ?
Lotus Domino 8.5.3 version update 1 extlib
Thanks
If you make a panel control read only, the controls within the panel control are read only too. So, add your fields inside a panel control and make it read only:
<xp:panel readonly="true">
Add your fields here
</xp:panel>
The content of the dialog is defined by the structures declared within it, so you'd just make your elements within the content area computed text, or readonly fields, however you want to do it. If your question is can it be opened read-only sometimes, save a variable to the scope and use that to determine whether or not to render controls as editable.
I've spent days trying to figure this out and I give up.
I am a LotusScript programmer and have been trying to learn XPages. All of the examples and sample programs I've studied only touch on pieces of this.
Can someone explain to me step by step how to use the Selected property of the Extension Library Navigator control?
I have created my own custom control based on the layout control from the Extension Library and created a custom property called navigationPath. I also created a navigator custom control that has 5 Page Link Nodes. In the "Selected" property of each Page Link Node, I put the following SSJS:
if(compositeData.navigationPath == "/Home/ApplicationPool"){
return true
}else{
return false
}
/Home/ApplicationPool corresponds to the value I put in the "Selection" property of the particular Page Link Node.
In each layout custom control, I set the "navigationPath" property to compositeData.navigationPath.
What did I miss?
there is a selected and selection property and they mean very different things and can't be used at the same time. In the code example in your question above you are using the selected property which is the wrong one in this case.
Your treeNodes in the navigator should be setup to use the selection property, this is a RegEx value that is used to see if it matches the value passed into the application layout via the custom property.
<xe:navigator id="navigator1" expandable="true" expandEffect="wipe">
<xe:this.treeNodes>
<xe:pageTreeNode label="nodeName" page="/page.xsp" selection="/Home/ApplicationPool" />
</xe:this.treeNodes>
</xe:navigator>
As you can see you don't need to use any SSJS to evaluate a true/false outcome. Just match the value in the treeNode to the one in the XPage's applicationLayout control.
If your using tabs in the layout titleBar then you can set a selection property there also that uses the format /Home/.* which will make that tab highlighted for every XPage that have /Home/ at the start of it's navigationpath custom property. Don;t forget it is RegEx so any valid RegEx statement can be used here adding more power to this particular property.
For the tree nodes in the navigator control you define the name of the xpage to open and then the related selection. Example:
<xe:pageTreeNode page="/text.xsp" selection="/Home/Test" label="Test page">
</xe:pageTreeNode>
For the individual xpages using the applicationLayout you define a value for navigationPath. If this value matches an entry in one of the tree nodes the naviagor control, then the corresponding menu item will be highlighted in the browser. The best way to define the value of the navigationPath is by using a custom property (as you are using). Here's an example of that:
<xe:applicationLayout id="applicationLayout1">
<xe:this.configuration>
<xe:oneuiApplication navigationPath="${javascript:compositeData.navigationPath}" ...
You can see examples of using all this in the Extension Library Teamroom and Discussion templates.
Based on my explanation on how to use it, I can see that you are not using the selection property on the navigation control correct. You just need to define a unique value for each tree node (which then will be used if it matches navigationPath on the individual xpages).
So for your specific example change your selection property to just return: "/Home/ApplicationPool"