change ECT text field to textarea

[davidnarramore]

I have an External Content Type list that uses a SQL server 2014 database as the source. The column is an nvarchar(max) data type. When the forms are created the field is of a single line of text. I would like it to be a textarea type (multi line of text). Is there a way to make it so?

[Nikita Kurguzov]

Dear David,
This seems like the default behavior. Please, check out this topic for a potential solution - https://social.technet.microsoft.com/Fo ... alprevious

[davidnarramore]

So Nikita you are telling me that I should use InfoPath forms and NOT SPForms to accomplish this. Maybe I need to use InfoPath for all my forms and do away with SPForms.

[Nikita Kurguzov]

Dear David,
I am not suggesting to use Infopath in any way, in my answer there was a Powershell script instead.

Forms Designer itself does not change the type of fields - this is handled by SharePoint on the server, it only changes their presentation. Thus we can help you change the presentation of the field, how it's handled on the form, make it appear as a Multiline text, but not more than that.

[davidnarramore]

Because this is an ECT list, BCS won't allow the column to be changed with PowerShell. I just want the field presentation on the form to be multi line.

[Nikita Kurguzov]

Dear David,
In that case, you can simply follow this article, for example - https://spform.com/custom-fields/custom ... nline-mode
If you follow it step by step, it will allow you to replace Single Line Text field with an expanding Kendo Editor Inline Mode - it looks like Single Line field at first, but expands with each new line. Alternatively, for a more traditional Multiline feel, you can replace HTML content:

Code: Select all

<asp:HiddenField runat="server" ID="{{FieldName}}Field" Value="{@{{FieldName}}}" __designer:bind="{{DataBinding}}" />
<div></div>

with

Code: Select all

<asp:HiddenField runat="server" ID="{{FieldName}}Field" Value="{@{{FieldName}}}" __designer:bind="{{DataBinding}}" />
<textarea></textarea>

And JavaScript with:

Code: Select all

$('head').append('<link rel="stylesheet" href="https://static.spform.com/fd/css/kendo.common.min.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="https://static.spform.com/fd/css/kendo.office365.min.css" type="text/css" />');
 
 
var hidden = fd.field(fieldName).control()._el().find('>input');
var editor = fd.field(fieldName).control()._el().find('>textarea');
 
//updates hidden field that stores the actual data
function updateText(){
    hidden.val(editor.data("kendoEditor").value());
}
 
//detects changes to the input
function onChange(e) {
    updateText();
}
function onPaste(e) {
    updateText();
}
 
//initializes kendo editor
SP.SOD.executeFunc('plumsail.fd.kendo.js', 'kendo', function() {
    var text = hidden.val();
    //only use decoded if you plan to store the value in Plain text
    var decoded = $('<textarea/>').html(text).text();
    editor.kendoEditor({
                        change: onChange,
                        paste: onPaste,
                        value: decoded
                    });
});

[davidnarramore]

We have version SharePoint Designer version 3.1.4 the Kendo editor template is not an option. What do we have to do to get it?

[Nikita Kurguzov]

Dear David,
If your version is 3.1.4, it should be an option as you need to use Custom template, not Kendo. But you need to follow an instruction here, step 1 to 4 - https://spform.com/custom-fields/custom ... nline-mode (except for your ECT field, not multiline)

[davidnarramore]

This is an External Content Type list. How do I implement the "hidden" field to hold the value? Do I have to create a new column in the database?

[Nikita Kurguzov]

Dear David,
All the steps need to be performed in the designer only, you do not need to modify anything outside.
Just to be extra clear, please, follow these steps:
1) Select your field in the designer
2) Set CONTROL/Template: Custom:

CustomTemplate.jpg (35.13 KiB) Viewed 1605 times

3) Below, click CONTROL/HTML and replace its content with:

Code: Select all

<asp:HiddenField runat="server" ID="{{FieldName}}Field" Value="{@{{FieldName}}}" __designer:bind="{{DataBinding}}" />
<textarea></textarea>

CustomTemplateHTML.png (2.33 KiB) Viewed 1605 times

4) Below, click CONTROL/JavaScript and replace its content with the following script:

Code: Select all

$('head').append('<link rel="stylesheet" href="https://static.spform.com/fd/css/kendo.common.min.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="https://static.spform.com/fd/css/kendo.office365.min.css" type="text/css" />');
 
 
var hidden = fd.field(fieldName).control()._el().find('>input');
var editor = fd.field(fieldName).control()._el().find('>textarea');
 
//updates hidden field that stores the actual data
function updateText(){
    hidden.val(editor.data("kendoEditor").value());
}
 
//detects changes to the input
function onChange(e) {
    updateText();
}
function onPaste(e) {
    updateText();
}
 
//initializes kendo editor
SP.SOD.executeFunc('plumsail.fd.kendo.js', 'kendo', function() {
    var text = hidden.val();
    //only use decoded if you plan to store the value in Plain text
    var decoded = $('<textarea/>').html(text).text();
    editor.kendoEditor({
                        change: onChange,
                        paste: onPaste,
                        value: decoded
                    });
});

CustomTemplateJS.png (2.31 KiB) Viewed 1605 times