Making Add New option appear first!

Knack 101 Tips & Tricks
1

So I have a field that is a connection field and the ability for a use to add a new option.

Because of the workflow I have I need to make the “ADD A NEW OPTION” appear before the field and not after. Does anyone know if there is a way with CSS or JQ to adjust the unloading order so the “Add New option” link will appear before the field it is adding a new option to?

Thanks.

2

Hi @GSH,
You can do this with the following JS:

If you want to only apply it to one particular field:

$(document).on('knack-view-render.any', function(event, view, record) {

  const connectionFieldKey = 'field_xx'; // Replace field_xx with your connection field key
  const $inputDiv = $(`#${view.key} #kn-input-${connectionFieldKey}`);
  const $inputControl = $inputDiv.children('.control');
  const $addOptionLink = $inputControl.children('.kn-add-option');
  $addOptionLink.insertBefore($inputControl);

});

If you want to apply it for all connection fields:

$(document).on('knack-view-render.any', function(event, view, record) {

  $(`#${view.key} .kn-input-connection`).each(function() {

    const $inputControl = $(this).children('.control');
    const $addOptionLink = $inputControl.children('.kn-add-option');
    $addOptionLink.insertBefore($inputControl);

  });

});

The result should look something like this:
image

1 Like
3

Hi @GSH

We have a function that decides if a button is above or below and changes the text of the add option:

$(document).on("knack-view-render.any", function (event, view) {
    if ($(".kn-add-option")[0]) { //setup up above & below add options
        const options = {
            optionAbove: {
                3374: "Offence",
                //...more options here
            },
            optionBelow: {
                3341: "Surgery",
                // ....More options here
            }
        };

        const updateOptions = (fieldEle, btnStr, defaultVal, isAbove) => {
            const addOption = fieldEle.find('.kn-add-option');
            const defaultOpt = fieldEle.find('.default');

            addOption.html(btnStr).css('width', 'fit-content');
            if (isAbove) {
                addOption.insertBefore(fieldEle.find('.control:first'));
            }
            defaultOpt.attr("value", defaultVal);
        };

        for (const [optionType, optionData] of Object.entries(options)) {
            for (const [fieldId, value] of Object.entries(optionData)) {
                const fieldEle = $(`#kn-input-field_${fieldId}`);

                if (!fieldEle.find('.kn-add-option').length) continue;

                const btnStr = `Add ${value}`;
                const defaultVal = optionType === 'optionAbove' ? "Please use the button above to add new records" : `Start typing first few characters of ${value}`;
                const isAbove = optionType === 'optionAbove';

                updateOptions(fieldEle, btnStr, defaultVal, isAbove);
            }
        }
    }
});

This works on all add option links that you add to the options object. Any problems let me know

Craig

4

Great, thanks both this worked a treat.