Populate lookup field in datatable

Good day, i have one main list1, and list2,list3,list4 secondary
In list1 i make a lookup to list2. and list3 with lookup to list2
now i want to select in datatable multiple choice of lookup field in list1:

Canal Subcanal_1 Subcanal_2
list2_Title(Canal) 1)list3_Title(subcanal1) 1)list4(subcanal2)
2)list3(subcanal1) 2)list4(subcanal2)
3) list3(subcanal1)

how i can do this?

Dear @ixxxl,
Are we talking about Data Table or are we talking about List or Library controls? Do you want cascading lookup fields in List or Library control?

@Nikita_Kurguzov
Good day, i was thinking about datatable.
user select 1 chanel (Social Media), and must have possibility to select 3-5 subchannels(Viber, telegram,etc...) That's why i was thinking about datatable..
list and library control will be linked to one list ...

PS. yes i need like cascading lookup fields. but i need to select for first lookup(spcial media) , several subchanel(viber,telegram.) For now in example i see only one chanel and only one subchanel.
https://plumsail.com/docs/forms-sp/how-to/lookup-cascading.html

in list2 will be stored chanels in title (Social Media)
in list3 will be subchanels in title(Viber,Telegram) and lookup to list2 (Social Media)
in list4 will subchanel2 in title (Libercard,Cardurile Gama) and lookup to list3(Viber) and lookup to list2(Social Media)

Dear @ixxxl,
Well, here is the most similar case we have to what you need, it also has cascading dropdowns in a Data Table control - Populate column of DataTable in SharePoint form — SharePoint forms

1 Like

@Nikita_Kurguzov
Thank you, as i want!

Hi, thank you for the code examples. I am using the same code in my data table, here is my issue:

  1. Select category and then select from cascading product dropdown.
  2. Click the category again but the product dropdown does not goes blank. It retains the value until I click the product dropdown

Is there any suggestion on how to refresh the product dropdown so that user has to select the value again?

Thanks.

Dear @aseem,
This is not easy. Please, try adding the following:

var dt_value = JSON.parse(JSON.stringify(fd.control('DataTable1').value));
var manual_change = true;

fd.control('DataTable1').$on('change', function(value) {
    if(!manual_change){
      return true;
    }
    else{
        var modifiedValue = null;
        if(value) {
            for (var i = 0; i < value.length; i++) {
                if (!value[i].Category || (value[i].Category && dt_value.length > i && dt_value[i].Category && value[i].Category != dt_value[i].Category)) {
                    if (!modifiedValue) {
                        modifiedValue = Object.assign({}, value);
                    }
                    modifiedValue[i].Product = '';
                }
            }
        }
        if (modifiedValue) {
            manual_change = false;
            fd.control('DataTable1').value = value;
            fd.control('DataTable1').widget.refresh()
            manual_change = true;
        }
    }
    dt_value = JSON.parse(JSON.stringify(fd.control('DataTable1').value));
});

Excellent! This worked thanks for your help. One more question I have is that the number data field is default to 0. Can I change it to 1 or blank it out? Users can submit using 0 which I don't want.
Thanks.

Dear @aseem,
Sure, here you can find an example on how to prepopulate field for a new row, you can just set it to 1 - Work with Data Table using JS on Plumsail Forms for SharePoint — SharePoint forms

That also worked, thanks!

@Nikita_Kurguzov
Good day ! How can i hide second lookup with no values ?
for example i selected first one , and if the second lookup is blank to hide it , or if second lookup have value to make second lookup required

Dear @ixxxl,
Do you mean potential values, before user selects something? If there are options - make required, if there are no options - hide? How would it look hidden in a DataTable? Just not editable? Invisible?

@Nikita_Kurguzov
oh it's my bad. the question is about simple 3 lookup cascading fields. The firs category value if is selected, the second if have lookup values to be required ,if not hide

function filterCanal(linie) {
    var linieID = linie && linie.LookupId || linie || null;
    // alert(linieID)
    fd.field('CMSCategorii').filter = "Stare eq 'Activ'";
    fd.field('CMSCategorii').widget.dataSource.read();
}
fd.spRendered(function () {
    fd.field('CMSCategorii').ready().then(function (field) {
        filterCanal(field.value);
    });
    // fd.field('IDLookupCateg').ready().then(function() {
    //filter Problems when Category changes
    //     fd.field('IDLookupCMS').$on('change', function(value){
    //       filterCategory(value);
//    fd.field('CMSCategorii').value = null;

});
//filter Categories when form opens


function filterProblem(category) {
    var categoryId = category && category.LookupId || category || null;
    fd.field('CMSSubcategorii1').filter = "IDLookupCateg/Id eq " + categoryId + " and Stare eq 'Activ'";
    fd.field('CMSSubcategorii1').widget.dataSource.read();
}
fd.spRendered(function () {
    fd.field('CMSSubcategorii1').ready().then(function () {
        //filter Problems when Category changes
        fd.field('CMSCategorii').$on('change', function (value) {
            filterProblem(value);
            fd.field('CMSSubcategorii1').value = null;
        });
        //filter Problems when form opens
        //   fd.field('CMSCanal').ready().then(function(field) {
        //   filterProblem(field.value);
        //  });
    });
});


function filterCat2(canal) {
    var canalId = canal && canal.LookupId || canal || null;
    fd.field('CMSSubcategorii2').filter = "IDLookupCat1/Id eq " + canalId + " and Stare eq 'Activ'";
    fd.field('CMSSubcategorii2').widget.dataSource.read();
}
fd.spRendered(function () {
    fd.field('CMSSubcategorii2').ready().then(function () {

        //filter Problems when Category changes
        fd.field('CMSSubcategorii1').$on('change', function (value) {

            filterCat2(value);
            fd.field('CMSSubcategorii2').value = null;
        });
        //filter Problems when form opens
        //   fd.field('CMSCanal').ready().then(function(field) {
        //   filterProblem(field.value);
        //  });
    });
});

function hideOrShowProblem2() {
    if (fd.field('CMSSubcategorii1').value) {
        // Show the Due Date field
        //  $(fd.field('CMSSubcategorii1').$parent.$el).show();    
        $(fd.field('CMSSubcategorii2').$parent.$el).show();
		

    } else {
        // Hide the Due Date field
        // $(fd.field('CMSSubcategorii1').$parent.$el).hide();
        $(fd.field('CMSSubcategorii2').$parent.$el).hide();


    }
}

fd.spRendered(function () {

    function hideOrShowProblem() {
        if (fd.field('CMSCategorii').value) {
            // Show the Due Date field
            $(fd.field('CMSSubcategorii1').$parent.$el).show();
            $(fd.field('CMSSubcategorii2').$parent.$el).hide();

        } else {
            // Hide the Due Date field
            $(fd.field('CMSSubcategorii1').$parent.$el).hide();
            $(fd.field('CMSSubcategorii2').$parent.$el).hide();


        }

    }

    // Calling hideOrShowDueDate when the user changes the Start Date
    fd.field('CMSCategorii').$on('change', hideOrShowProblem);
    fd.field('CMSSubcategorii1').$on('change', hideOrShowProblem2);

    // Calling hideOrShowDueDate on form loading
    hideOrShowProblem();
    hideOrShowProblem2();

});

Dear @ixxxl,
Here's the code that will hide Product field, if there are no products of selected Category, otherwise, the Product field is required:

function filterProducts(category) {
    var categoryId = category && category.LookupId || category || null;
    fd.field('Product').filter = 'Category/Id eq ' + categoryId;
    fd.field('Product').refresh().then(function(){
      if(fd.field('Product').widget.dataSource.data().length == 0){
        $(fd.field('Product').$parent.$el).hide();
        fd.field('Product').required = false;
      }
      else{
        $(fd.field('Product').$parent.$el).show();
        fd.field('Product').required = true;
      }
    });
}

fd.spRendered(function() {
    fd.field('Product').ready().then(function() {
        //filter Products when Category changes
        fd.field('Category').$on('change', function(value){
            filterProducts(value);
            fd.field('Product').value = null;
        });

        //filter Products when form opens
        fd.field('Category').ready().then(function(field) {
            filterProducts(field.value);
        });
    });
});

@Nikita_Kurguzov
Good day, i have an error

function filterProducts(category) {
    var categoryId = category && category.LookupId || category || null;
    fd.field('SubCategorii1').filter = "IDLookupCateg/Id eq " + categoryId + " and Stare eq 'Activ'";
    fd.field('SubCategorii1').refresh().then(function(){
      if(fd.field('SubCategorii1').widget.dataSource.data().length == 0){
        $(fd.field('SubCategorii1').$parent.$el).hide();
        fd.field('SubCategorii1').required = false;
      }
      else{
        $(fd.field('SubCategorii1').$parent.$el).show();
        fd.field('SubCategorii1').required = true;
      }
    });
}

fd.spRendered(function() {
    fd.field('SubCategorii1').ready().then(function() {
        //filter Products when Category changes
        fd.field('Categorii').$on('change', function(value){
            filterProducts(value);
            fd.field('SubCategorii1').value = null;
        });

        //filter Products when form opens
       // fd.field('Categorii').ready().then(function(field) {
       //     filterProducts(field.value);
       // });
    });
}

Dear @ixxxl,
Tested your code as is, had to add ); at the end, but otherwise it works as is for me. Which version of the app are you using?

function filterProducts(category) {
    var categoryId = category && category.LookupId || category || null;
    fd.field('SubCategorii1').filter = "IDLookupCateg/Id eq " + categoryId + " and Stare eq 'Activ'";
    fd.field('SubCategorii1').refresh().then(function(){
      if(fd.field('SubCategorii1').widget.dataSource.data().length == 0){
        $(fd.field('SubCategorii1').$parent.$el).hide();
        fd.field('SubCategorii1').required = false;
      }
      else{
        $(fd.field('SubCategorii1').$parent.$el).show();
        fd.field('SubCategorii1').required = true;
      }
    });
}

fd.spRendered(function() {
    fd.field('SubCategorii1').ready().then(function() {
        //filter Products when Category changes
        fd.field('Categorii').$on('change', function(value){
            filterProducts(value);
            fd.field('SubCategorii1').value = null;
        });

        //filter Products when form opens
       // fd.field('Categorii').ready().then(function(field) {
       //     filterProducts(field.value);
       // });
    });
});

@Nikita_Kurguzov
For now 1.4.8
i know about 1.8.7
i put it yesterday on a test, and want to verify how would work forms with multiple views

Dear @ixxxl,
It should work with the latest version as I've tested. Not sure about an older version. You can test this code as well with the latest version.

@Nikita_Kurguzov

I opened a form in designer, and want to import from production a form (1.4.8), but it gives me an error

System.Net.WebException: The remote server returned an error: (401) Unauthorized.
   at System.Net.HttpWebRequest.GetResponse()
   at Microsoft.SharePoint.Client.SPWebRequestExecutor.Execute()
   at Microsoft.SharePoint.Client.ClientContext.GetFormDigestInfoPrivate()
   at Microsoft.SharePoint.Client.ClientContext.EnsureFormDigest()
   at Microsoft.SharePoint.Client.ClientContext.ExecuteQuery()
   at Microsoft.SharePoint.Client.ClientContextExtensions.GoOrZajb8(ClientRuntimeContext  , Int32  , Int32  )
   at Microsoft.SharePoint.Client.ClientContextExtensions.ExecuteQueryRetry(ClientRuntimeContext clientContext, Int32 retryCount, Int32 delay)
   at Plumsail.Forms.SharePoint.FormsManager..ctor(SPClientProvider provider, Uri webUrl, Guid listId, String contentTypeId)
   at nJUxshXU64TwUX6Wh1.YC6nF7yUZsQ4dJjpro.<>c__DisplayClass8_0.<SetLayoutAsync>b__0()
   at System.Threading.Tasks.Task.InnerInvoke()
   at System.Threading.Tasks.Task.Execute()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at nJUxshXU64TwUX6Wh1.YC6nF7yUZsQ4dJjpro.<SetLayoutAsync>d__8.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd(Task task)
   at Plumsail.Forms.ViewModels.DesignerViewModel.<SaveSharePointFormAsync>d__245.MoveNext()

If i try to save some field it works.

Dear @ixxxl,
Hard to say from the error what exactly goes wrong... Which authentication method do you use? Try to reconnect and try again. Also, you can try to remove fields/controls one-by-one to figure out what exactly within the form causes the issue