How to set the position of a Field Group on a form

1

How do I set the position of a Field Group on a Form?

The default position is left aligned, and you cannot put it in line with other data fields.

I currently have a text field for 'Status_Enrollment', and I want a Field Group to appear just to the right of the text field.
Below is the code I tried and I get the follow error:
Uncaught TypeError: Cannot read properties of undefined (reading 'style')

(() => {
  'use strict';
  kintone.events.on(['app.record.show','app.record.edit','app.record.edit.change.Status_Text','app.record.create.change.Status_Text'], function(event) {
    let record = event.record;
    let StatusValue = record.Status_Enrollment.value;

console.log('ready to check status which is:' + StatusValue);

      if(record.Status_Enrollment.value == 'Denied') {
            console.log('ready to position denial reason group');
        
        record.Denial_Reason_Group.style.top = '800px';
        record.Denial_Reason_Group.style.left = '800px';
       return event;
  }});
})();

These screenshots depict what I am trying to do:

image
image1255×198 12.4 KB

Any guidance will be greatly appreciated.

2

Hello @DebraMalkus ,

Welcome to the community!

While this task is intricate, it's feasible. However, please be aware that it involves manipulating the internal structure of the DOM, so it might cease to function after any updates to Kintone.

Below is an example script that accomplishes the task. It's worth noting that retrieving field elements differs between the Record Details page and the Record Creation/Edit page.

(function() {
    'use strict';

    // Function to move the field group next to the text field
    function moveFieldGroup() {
        // Function to apply flexbox and move elements
        function applyFlexbox(firstTextField, fieldGroup) {
            const parentElement = firstTextField.parentNode;

            // Create a flex container
            const flexContainer = document.createElement('div');
            flexContainer.style.display = 'flex';
            flexContainer.style.alignItems = 'center';
            flexContainer.style.width = '100%'; // Ensure the container takes full width

            // Set widths for the fields to avoid squeezing
            firstTextField.style.flex = '1';
            firstTextField.style.minWidth = '200px'; // Adjust minimum width as needed
            firstTextField.style.maxWidth = '400px'; // Adjust maximum width as needed
            firstTextField.style.marginRight = '20px'; // Add some spacing between fields

            fieldGroup.style.flex = '1';
            fieldGroup.style.marginLeft = '20px'; // Adjust margin for spacing

            // Move the first text field and field group into the flex container
            parentElement.insertBefore(flexContainer, firstTextField);
            flexContainer.appendChild(firstTextField);
            flexContainer.appendChild(fieldGroup);
        }

        // Function to check and apply flexbox when elements are ready
        function checkAndApplyFlexbox(retryCount = 0) {
            const maxRetries = 10; // Set a maximum number of retries
            const firstTextField = document.querySelector('.value-6469121');
            const fieldGroup = document.querySelector('.field-6469123');

            if (firstTextField && fieldGroup) {
                applyFlexbox(firstTextField, fieldGroup);
            } else if (retryCount < maxRetries) {
                setTimeout(() => checkAndApplyFlexbox(retryCount + 1), 1000); // Retry after 1000ms
            }
        }

        // Record create/edit page
        if (window.location.href.includes('edit') || window.location.href.includes('create')) {
            checkAndApplyFlexbox();
        }
        
        // Record detail page
        else if (window.location.href.includes('show')) {
            const firstTextField = kintone.app.record.getFieldElement('Text1');
            const fieldGroup = kintone.app.record.getFieldElement('Group');

            if (firstTextField && fieldGroup) {
                applyFlexbox(firstTextField, fieldGroup);
            }
        }
    }

    // Event handlers for record create/edit and record detail pages
    kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.detail.show'], function(event) {
        moveFieldGroup();
        return event;
    });
})();
3

Thanks Chris! I'll try this in the next few days and let you know how it goes.

Have a great weekend.
Deb

1 Like