Form Control Template Custom Examples HTML field

[GregReno]

Where can I find examples for the Form Control Template Custom HTML field?
I'd like to modify check boxes. Specifically hiding the label.

Thank you.

[Dmitry Kozlov]

Hi,
Do you mean that you want to remove the title? If so, just set Visibility property of the Title section to Collapsed in the field properties.

[GregReno]

I can remove/change the title with JQuery easily enough and hide the value as well.
Just was looking for direction on doing in in the console with out going to the jquery screen. Just trying to keep things tidy. I am not sure how to the Template Custon HTML <asp:HiddenField runat="server" ID="{{FieldName}}Field" Value="{@{{FieldName}}}" __designer:bind="{{DataBinding}}" />
With checkboxes. It might come in handy for other fields as well.

I typically have 200-300 fields per form and they are different in most cases. Which means more jquery backend stuff. I have been tasked with making a master template form and was hoping to utilize this in some way.


thanks.

[Dmitry Kozlov]

Hi!
The idea of custom templates is that you can define any custom rendering mechanism for a field by adding extra html, JavaScript etc but the real value is stored in the hidden field with __designer:bind attribute. So, each time a user changes the state of your custom control, say picks a value in a drop-down or switches a toggle etc you must change the value in the hidden field. And to initialize the state of your custom control you must get the value from the hidden field on loading the form. So, I'm not sure that it can help in your case because it's not a way of changing default rendering of a field but a way of replacement of a default control with your own building from scratch. So, we used this approach to replace default date, date and time pickers, text editor with Kendo UI controls:
https://spform.com/custom-fields/kendo- ... oint-forms

[alexey.babin]

Hi,

I'll provide an example how I change standard radiobuttons to jQuery ui-choose (https://wangxing218.github.io/ui-choose/test/demo.html)

In my case I acheive this such way:

1. Put on form the table, that will contain the controls I wich to change, put on it the controls and set style attribute display: none
2. Put on form "HTML" element and set it's content as

Code: Select all

<div><select class="ui-choose" id="my-coose"><option value="First">First</option><option value="Second">Second</option></select></div>

3. Work on it with javascript (actually examples are in typescript):
3.1. first of all, I have to load the script containing component and css styles for it. I store the files in Site Assets library and use $.getScript to get it:

Code: Select all

function prepareScripts(...scriptNames: string[]): Promise<any> {
    let promisesArray = new Array<Promise<any>>();
    scriptNames.forEach(scriptName => {
        let promise = new Promise((resolve, reject) => {
            $.getScript(scriptName, () => {
                resolve();
            });
        });
        promisesArray.push(promise);
    });

return Promise.all(promisesArray);
}

Code: Select all

function prepareCss(...fileNames: string[]): Promise<any> {
    let promisesArray = new Array<Promise<any>>();

    fileNames.forEach(fileName => {
        let promise = new Promise<any>((resolve, reject) => {
            $.get(fileName, () => {
                $("<link>", { rel: "stylesheet", type: "text/css", href: fileName }).appendTo("head");
                resolve();
            })
        });
        promisesArray.push(promise);
    });

    return Promise.all(promisesArray);
}

3.2. When scripts are ready, I set the html to be jQuery UI component:

Code: Select all

Promise.all(prepareScripts("path-to-js"), prepareCss("path-to-css"))
   .then(() => {
      $("#my-coose").uiChoose(options)
   });

3.3. A also need to link the form field events to newly created UI element. In Options object there is change event, on that you could subscribe your callback, that contain such piece of code:

Code: Select all

change: (placementType: tPlacementType) => {
            fd.field("eventPlacementType").value(placementType);
            setVisibilityPlacementType(placementType);
        }

[alexey.babin]

Hi,

I'll provide an example how I change standard radiobuttons to jQuery ui-choose (https://wangxing218.github.io/ui-choose/test/demo.html)

In my case I acheive this such way:

1. Put on form the table, that will contain the controls I wich to change, put on it the controls and set style attribute display: none
2. Put on form "HTML" element and set it's content as

Code: Select all

<div><select class="ui-choose" id="my-coose"><option value="First">First</option><option value="Second">Second</option></select></div>

3. Work on it with javascript (actually examples are in typescript):
3.1. first of all, I have to load the script containing component and css styles for it. I store the files in Site Assets library and use $.getScript to get it:

Code: Select all

function prepareScripts(...scriptNames: string[]): Promise<any> {
    let promisesArray = new Array<Promise<any>>();
    scriptNames.forEach(scriptName => {
        let promise = new Promise((resolve, reject) => {
            $.getScript(scriptName, () => {
                resolve();
            });
        });
        promisesArray.push(promise);
    });

return Promise.all(promisesArray);
}

Code: Select all

function prepareCss(...fileNames: string[]): Promise<any> {
    let promisesArray = new Array<Promise<any>>();

    fileNames.forEach(fileName => {
        let promise = new Promise<any>((resolve, reject) => {
            $.get(fileName, () => {
                $("<link>", { rel: "stylesheet", type: "text/css", href: fileName }).appendTo("head");
                resolve();
            })
        });
        promisesArray.push(promise);
    });

    return Promise.all(promisesArray);
}

3.2. When scripts are ready, I set the html to be jQuery UI component:

Code: Select all

Promise.all(prepareScripts("path-to-js"), prepareCss("path-to-css"))
   .then(() => {
      $("#my-coose").uiChoose(options)
   });

3.3. A also need to link the form field events to newly created UI element. In Options object there is change event, on that you could subscribe your callback, that contain such piece of code:

Code: Select all

change: (placementType: tPlacementType) => {
            fd.field("eventPlacementType").value(placementType);
            setVisibilityPlacementType(placementType);
        }

[Dmitry Kozlov]

Hi Alexey,
Thank you very much for the contribution to our community!