In Odoo v16 Template form, I have a selection field “Activity Type” that contains records from backend (like Many2many-tags widget but now in Portal), will be chosen by the user, and the user can choose more than 1 record.
Depending on the chosen records, new 3 fields for each Activity type (divs) will appear and become mandatory.
This code is functioning flawlessly when logged in as a portal user. However, when a public user accesses this form, the field titled “Activity Type” appears, allowing me to select multiple records. However, the sections (divs) that are required to appear do not appear.
<div class="col-md-12"
style="padding-top: 20px !important; padding-bottom: 20px !important;">
<label class="form-label" for="activity_type_ids">Activity Type</label>
<span
style="color: red;"> *
</span>
<select class="form-control js-example-basic-multiple col-xl-6 mb-1 new-get_data"
multiple="multiple" name="activity_type_ids" required="1"
id="activity_type_ids">
<t t-foreach="activity_ids" t-as="activity">
<option t-att-value="activity" t-esc="activity.name"/>
</t>
</select>
<input type="hidden" id="hidden_activity_ids" name="hidden_activity_ids"/>
<input type="hidden" id="hidden_activity_codes"
name="hidden_activity_codes"/>
<!-- Div for Construction Fields -->
<div class="col-md-6 activity-section" id="construction_fields"
style="padding-top: 20px !important; padding-bottom: 20px !important;">
<label class="form-label">Construction CR Number</label>
<input type="text" class="form-control" name="construction_cr_number"
placeholder="Construction CR Number"/>
<label class="form-label">Construction CR</label>
<span style="color: red;">
*
</span>
<input type="file" class="form-control" name="construction_cr"
accept="application/pdf"/>
<label class="form-label">Construction Activity Register</label>
<input type="file" class="form-control"
name="construction_activity_register" accept="application/pdf"/>
<!-- Div for Maintenance and Operation Fields -->
<div class="col-md-6 activity-section" id="maintenance_fields"
style="padding-top: 20px !important; padding-bottom: 20px !important;">
<label class="form-label">Maintenance CR Number</label>
<span
style="color: red;"> *
</span>
<input type="text" class="form-control" name="maintenance_cr_number"
placeholder="Maintenance CR Number"/>
<label class="form-label">Maintenance CR</label>
<span style="color: red;">
*
</span>
<input type="file" class="form-control" name="maintenance_cr"
accept="application/pdf"/>
<label class="form-label">Maintenance Activity Register</label>
<span
style="color: red;"> *
</span>
<input type="file" class="form-control" name="maintenance_activity_register"
accept="application/pdf"/>
</div>
<!-- ETC... -->
The related JS (which is not working for public users) is:
odoo.define('custom_field.Many2many_tag', function (require) {
var PublicWidget = require('web.public.widget');
var rpc = require('web.rpc');
const { _lt } = require('web.core');
// Used in new_supplier_registration_request template
var NewData = PublicWidget.Widget.extend({
selector: '.new-get_data',
start: function () {
this._super.apply(this, arguments);
// Initialize the select2 widget
$('.js-example-basic-multiple').select2({
placeholder: _lt('Select Activities'),
allowClear: true,
});
// Hide all activity sections initially on page load
$('.activity-section').hide();
// Add an event listener to capture selected values
$('#activity_type_ids').on('change', function () {
// Get the selected values
var selectedValues = $(this).val();
// Parse the IDs from the selected values as integers
var selectedIds = selectedValues.map(function (value) {
return parseInt(value.match(/d+/)[0], 10);
});
// Perform an RPC call to get the activity codes based on selected IDs
rpc.query({
model: 'supplier.registration.activity',
method: 'read',
args: [selectedIds, ['code']],
}).then(function (records) {
var codes = records.map(function (record) {
return record.code;
});
// Clear all activity sections initially
$('.activity-section').hide();
$('input').removeAttr('required'); // Remove required attribute from all inputs
// Iterate over codes to show the relevant divs and set required attributes
codes.forEach(function (code) {
switch (code) {
case 'construction':
$('#construction_fields').show(); // Show construction fields
$('#construction_fields input').attr('required', true); // Set required attribute for all inputs in the div
break;
case 'maintenance':
$('#maintenance_fields').show();
$('#maintenance_fields input').attr('required', true);
break;
case 'education':
$('#education_fields').show();
$('#education_fields input').attr('required', true);
break;
case 'food_supplies':
$('#food_supplies_fields').show();
$('#food_supplies_fields input').attr('required', true);
break;
case 'equipment_supplies':
$('#equipment_supplies_fields').show();
$('#equipment_supplies_fields input').attr('required', true);
break;
case 'medical_equipment':
$('#medical_equipment_fields').show();
$('#medical_equipment_fields input').attr('required', true);
break;
case 'event_organization':
$('#event_organization_fields').show();
$('#event_organization_fields input').attr('required', true);
break;
default:
console.log("No matching activity found for code:", code);
}
});
// Set the hidden input field with the retrieved activity codes
$('#hidden_activity_codes').val(codes.join(','));
// Also set the hidden input with the selected IDs
$('#hidden_activity_ids').val(selectedIds.join(','));
});
});
},
});
PublicWidget.registry.Many2many_tag = NewData;
return NewData;
});