Orbeon Forms attaching xforms-disabled class to all fields after upgrading versions - orbeon

I am coming across an issue with getting older, previously working Orbeon forms to display in my Liferay portlet after upgrading to a new Orbeon Forms version.
My current environment:
Liferay Community Edition Portal 7.2.1 CE GA2, running on Tomcat-9.0.17
Upgraded Orbeon Forms 2016.2.1.201609272302 PE -> 2019.2.2.202003311635 PE, Orbeon Api and Orbeon Form Builder running on Tomcat-8.5.20, java version "1.8.0_192"
I started out by using an existing applicationName/formName, and after encountering too many errors related to data-migration (which I did expect) decided to start simple by duplicating an existing form, backing the old form up, and proceeding to use the existing form as a testing form with a limited amount of fields (one section with one input field).
Snapshot of Form in formbuilder
The portlet in the app shows the title of the form, but all content divs/spans have the “xforms-disabled” css class attached, and are hidden.
Form as viewed deployed in Liferay portlet
Orbeon starts up without issues. Nothing of note in the orbeon api logs.
The logger levels are all set to Debug. The orbeon.log file has no instances of xforms-disabled and hundreds of instances of xforms-enabled.
Link to DEBUG orbeon.log (large)
The endpoint that would bring back all the data for the form that would be embedded into the portlet looks like it has valid data:
/orbeon-api/fr/NRPP_Roads_FSR_Modification/roads_notification_of_fsr_modification/edit/?orbeon-embeddable=true
And then the end result on the page is as shown:
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-571" class="xforms-group">
<h2 class="fr-section-title"><span id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-576" class="fr-section-label xforms-control xforms-output xforms-output-appearance-minimal"><span class="xforms-help"></span><span id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-576≡≡c" class="xforms-output-output">Notification of FSR Mod Works</span><span class="xforms-hint"></span></span></h2>
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡switch" class="xforms-update-full xforms-switch">
<span class="xforms-case-selected">
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-579" class="fr-section-content xxforms-animate xforms-group">
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid" class="xbl-component xbl-fr-grid">
<table id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-589" class="fr-grid fr-grid-2 fr-grid-rrs_.fsr_.section_ fr-norepeat xforms-group" role="presentation">
<tbody class="fr-grid-body">
<tr class="fr-grid-tr">
<td id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-592" class="fr-grid-td xforms-group"><span id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control" class="fr-grid-1-1 xforms-control xforms-input xforms-disabled"><label class="xforms-mediatype-text-html xforms-disabled xforms-label" for="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control≡xforms-input-1"></label><input id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control≡xforms-input-1" type="text" name="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control≡xforms-input-1" value="" class="xforms-input-input"><span class="xforms-disabled xforms-alert"></span><span class="xforms-disabled xforms-hint"></span></span></td>
<td id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-597" class="fr-grid-td xforms-group"></td>
</tr>
</tbody>
</table>
<div class="" id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-599"></div>
</div>
</div>
</span>
</div>
</div>
It doesn't seem to matter how many fields or types of fields or sections/grids I add to the test page, they all render with the xforms-disabled class attached.
Why is the xforms-disabled class attached to the fields and how do I fix the form to prevent that from happening? Thanks in advance for the help!

Related

How to disable field's auoifilling in Chrome with Vaadin?

In all input fields in Chrome appear nonsens texts - some texts, that were written in other text field. It seems, that it is connected with default IDs. It can be probably resolved for text fields with setting custom id with setId(..) method. But it doesn't work for datefields, comboboxes etc. while the id is set for the parent div not the input itself eg.:
<div role="combobox" class="v-filterselect v-widget small v-filterselect-small v-has-width" id="Field-1553856663994" style="width: 100%;" autocomplete="off">
<input type="text" class="v-filterselect-input" autocomplete="nope" id="gwt-uid-134" aria-labelledby="gwt-uid-133" style="width: 100%;" tabindex="0" dir="">
<div class="v-filterselect-button" aria-hidden="true" role="button"></div></div>
Is the way in Vaadin to set id for inner element or to disable completion in Chrome?
Chrome the behavior on autocomplete attribute changed a while ago, but it has been until recently we made a change in our implementation according to that in Vaadin 8.
There is lengthy discssion about this in our issue tracker;:: https://github.com/vaadin/framework/issues/11437

Bootstrap checkbox does not display in IOS

I have a responsive page built upon bootstrap. For some reason, I cannot get the checkbox to display in an iOS built device. The checkboxes work in every browser imaginable, and even work in the developer module of chrome (emulating iOS devices) and even works in the iOS reader. It just will not display on an iPhone. Is it being hidden behind another element?
Thanks in advance!
http://www.johnstoncc.edu/FA/2/depnbrhhc.html
Changing the column sizes to the following fixes it.
<div>
<div class="col-xs-2 col-sm-2 col-lg-1" style="margin-top:20px;">
<input id="OBKey_Signed_1" type="checkbox" name="OBKey_Signed_1"
value="Y" required="" data-com.agilebits.onepassword.user-edited="yes"
style="-webkit-appearance: radio;">
</div>
<div class="col-xs-10 col-sm-10 col-lg-11">
By checking this box, I ratify the use of my typed name and
Student ID number as an electronic representation of my signature.
</div>
</div>

Umbraco - Add more than one RTE in Custom Grid Editor

I am creating custom grid editor and I would like to have more than one RTE inside of it. Currently, I am initializing RTE like this
<div unique-id="control.$uniqueId"
value="control.text1"
grid-rte configuration="control.config.rte">
</div>
This works fine for one instance of RTE. However, when I try to add 2nd or 3rd RTE in this manner, they are not initialized, instead I am getting multiline textbox.
So, how to add more than one RTE, and, is this best way to add RTE?
I had the same problem. I have solved the problem by adding $index. Like so:
<div unique-id="control.$uniqueId + $index"
value="control.text1"
grid-rte configuration="control.config.rte">
</div>
<div unique-id="control.$uniqueId + $index"
value="control.text1"
grid-rte configuration="control.config.rte"> </div>
The previous answer works when the control is inside the ng-repeat directive, ie
<tr ng-repeat="rowData in control.tabelsData">
<td>
<div
unique-id="control.$uniqueId + $index"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>
</td>
</tr>
Otherwise yes, manually modifying the unique-id would be the answer for a known amount of multiple amount of Rich Text Editors in the editor
<div
unique-id="control.$uniqueId+1"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>
<div
unique-id="control.$uniqueId+2"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>

knockout virtual elements and using "with" without a container element

Can someone tell me why this works:
<div data-bind="with: selectedItem">
<div id="dialog" data-bind="jqDialog: {title: drugName}">
//contents of a jquery ui modal
</div>
</div>
But trying to do the same with KO virtual elements does not work:
<!-- ko with: selectedItem -->
<div id="dialog" data-bind="jqDialog: {title: drugName}">
//contents of a jquery ui modal
</div>
<!-- /ko -->
I get the following error:
Error: Unable to parse bindings.
Message: ReferenceError: drugName is not defined;
Bindings value: jqDialog: {title: drugName}
I'd like to get rid of that div wrapper which just holds the data-bind attribute. I figured the virtual elements would make this a breeze.
Edit: Here's kind of the core to the page (though it won't run in the fiddle), http://jsfiddle.net/B8g5J/
I'm not sure if you have sorted this out, but is it possible that your server is configured to remove comments?
See: Knockout.js Virtual Elements Work Locally But Not Remotely

Jquery mobile integration on plone

I'm working on a Plone site that has JQuery mobile and I have an issue with the medias.
JQuery mobiles creates a neat menu in the web page's home page that links to the differents views of the plone site. The problem is that the medias (like the images) are linked with a weird URL that doesn't exists.
What I mean is the following:
I have an image whose path would be: url/competitions-en/red-bull-monte-descend/horaire/red-bull-monte-descend/vignette_normal
But in the src param of the img tag what I see it's url / nameOfView competitions-en/red-bull-monte-descend/horaire/red-bull-monte-descend/vignette_normal
I have no idea why JQuery mobile adds the name of the view to the path of the image, tough I do know that if I load the view client side (so instead of going: main menu>view, I load the view in a new tab) there's no problem. JQuery mobile adds the name of the view to the path of the image only when I access the view trough the main page.
Any ideas on how to fix it?
Additional information:
This would be the block in the plone template with the first TD generating the img
<tr tal:repeat="el python: une_date[1]['horaires']">
<td tal:attributes="class string:categorie ${el/categorie/cls}">
<img tal:attributes="src el/horaire/vignette; alt el/horaire/title_short;" />
</td>
<td tal:attributes="class string:competition">
<a tal:content="el/competition/title" tal:attributes="href el/competition/url"></a>
</td>
<td class="emplacement">
<span tal:content="el/horaire/emplacement"></span>
</td>
<td class="debut_fin">
<span tal:content="el/horaire/debut">debut</span> - <span tal:content="el/horaire/fin">fin</span>
</td>
<td class="title" tal:content="el/horaire/title">un titre</td>
</tr>
Ty,
Axel

Resources