How can I have my panel grow based on the repeating section's rows added programmatically?


Badge +4

Hello

I am retrieving data from SharePoint list and populating my repeating section, the panel does not grow but I get a small scroll bar in its place and I cannot see anything inside. I have attached my javascript.

Any help is greatly appreciated!

Thanks 

Kalpana


24 replies

Badge +8

Ensure the panel is big enough to hold the complete repeating section without any overlapping. 

If the issue still persists do share the Nintex Form in design mode, for more clarity.

Badge +4

The repeating section rows are not static, based on my dropdown choice I run a REST API call, retrieve items and add rows. WIll this be a problem?

Badge +8

No, that will not be an issue.

Check for below points:

  1. Ensure all the controls inside the panel are highlighted when the panel is selected
  2. Ensure enough spacing between each control

Refer the below screenshot:

201465_pastedImage_1.png

Badge +4

Thanks for replying to my questions!

This is how I have it now in a panel

201478_pastedImage_1.png

Badge +8

Provide more spacing between the controls in the below highlighted area: 

201529_pastedImage_2.png

Badge +4

This is what i have now

201611_pastedImage_1.png

And this is the code to populate the repeating section

NWF$.each(results.d.results, function(i, item)
{
NWF$(".myNounModifier .nf-repeater-row:last .charTitle input").val(item.Characteristics);
NWF$(".myNounModifier .nf-repeater-row:last .charDescription textarea").val(item.Definition);
if(item.Mandatory)
NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Required");
else
NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Not Required");
NWF$(".myNounModifier").find('a').click();
});

The results

201612_pastedImage_3.png

and strangely the last empty row is not present - instead a blank space - I think this is the issue but not sure how to fix this

201614_pastedImage_5.png

Apart from this I have to perform other functionalities like deleting the rows and retrieving new data and populating the repeating control. This has been a huge headache, so many hours spent. None of my control are touching each other. 

Any help is greatly appreciated 

Thanks

Kalpana

Badge +8

The below picture clearly shows that repeating section is taking more space than what is provided by the panel:

201588_pastedImage_1.png

Do provide more space as mentioned or even beyond and check for the controls in the Form preview mode:

201617_pastedImage_3.png

Badge +4

Thanks for working with me on this: So currently I added space

201620_pastedImage_1.png

but it still looks like this

201621_pastedImage_2.png

I also have code to show and hide the delete button and the Add new row on a dropdown bind

NWF$(document).ready(function()

{

                NWF$("#"+ NounModifier).bind("change", GetCharacteristics);

});

 

function GetCharacteristics()

{

    // only execute this function if the script has been loaded

    if (ready)

    {

                                                var selectedNoun;

                                                var selectedNounModifier;

                                                selectedNoun = NWF$('#' + Noun).find('option:selected').text();

                                                selectedNounModifier = NWF$('#' + NounModifier).find('option:selected').text();

                                               

                                                NWF$(".myNounModifier").find('a').show();

                                                NWF$(".myNounModifier").find('img').show();

                                               

                                                //Remove previous values if there are any

                                                NWF$(".myNounModifier .nf-repeater-row").each(function(){

                                                var title = NWF$(this).find('.charTitle input').val();

                                                if(title != "")

                                                NWF$(this).find('.nf-repeater-deleterow-image').click();

                                                });

 

 

                                                var restQuery = SPAppWebUrl + "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('Noun-Modifier-Characteristics')/items?$select=Noun/Title,NounModifier/Title,Characteristics,Mandatory,Definition,Value&$expand=Noun,NounModifier&$filter=(Noun/Title eq '" + selectedNoun+ "') and (NounModifier/Title eq '" + selectedNounModifier + "')&@target='" + SPHostUrl + "'";

                                                // create  new executor passing it the url created previously

                                                var executor = new SP.RequestExecutor(SPAppWebUrl);

                                                 

                                                // execute the request, this is similar although not the same as a standard AJAX request

                                                executor.executeAsync(

                                                {

                                                                url: restQuery,

                                                                method: "GET",

                                                                headers: { "Accept": "application/json; odata=verbose" },

                                                                success: function (data)

                                                                {

                                                                 

                                                                                // parse the results into an object that you can use within javascript

                                                                                var results = eval(JSON.parse(data.body));

                                                                                NWF$.each(results.d.results, function(i, item)

                                                                                {

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charTitle input").val(item.Characteristics);

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charDescription textarea").val(item.Definition);

                                                                                                if(item.Mandatory)

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Required");

                                                                                                else

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Not Required");

                                                                                                NWF$(".myNounModifier").find('a').click();

                                                                                });

                                                                                NWF$(".myNounModifier .nf-repeater-row:last").addClass("rptClass");

                                                                                NWF$(".myNounModifier").find('a').hide();

                                                                                NWF$(".myNounModifier").find('img').hide();

                                                                },

                                                                error: function (data)

                                                                {

                                                                                // an error occured, the details can be found in the data object.

                                                                                alert("Ooops an error occured");

                                                                }

                                                });

                                                //set the textbox to the currently selected dropdown value

                                                NWF$('#' + txtNounModifier).val(NWF$('#' + NounModifier).find('option:selected').text());

                                }

                }

}

Badge +8

If you wish to hide the Add Row and Delete option use the below setting in Repeater Section rather doing in the script:

Also. notices an extra ending '}' in the above code. Please do use browser developer tool (pressing F12) and check if any script errors are found in the console.

201627_pastedImage_1.png

Badge +4

Thanks for your reply!

There are no errors. I took a snippet of my code, may be I missed something. 

As for the control's setting, I can't use prevent add/delete setting, because f I do that I can't add rows programmatically as well. 

Thanks

Kalpana

Badge +8

Can you share the exported form XML to troubleshoot?

Badge +4

I sure can! Thanks for working with me on this.

Badge +4

I was able to add the form only to my initial post up top. 

Badge +8

Try zipping (.ZIP) the form definition .XML file and then attached

Badge +4

I already attached it to my first post along with the javascript txt file - do you see it?

Badge +8

Got it !

Badge +8

Below are the steps performed to view the form and fix the repeating section scroll:

  1. Removed the script in the Custom Javascript and Custom Javascript Includes, because with this the form used to NOT load and used to show loading image
  2. On successful publish of the form, viewed the form in the browser with inspect element on the panel (which contained the repeating section) and increased the height from 509px to 651px. On increasing the height of this panel the scroll bar disappeared and worked as expected.
  3. Increased the same panel height to ensure the published form show the panel height above 651px. 

PFA updated form. Hope this helps! 

201725_pastedImage_2.png

201724_pastedImage_1.png

201726_pastedImage_3.png

Badge +4

Even if I set the height to 700, once I programmatically populate the repeating section, the scroll bar appears unfortunately.

Badge +8

Can you inspect the repeating section panel with data populated and check for the CSS which is cause of the scrollbar to appear? Just like how I have mentioned earlier. 

Badge +8

Also, try to update the CSS definition which is causing the scrollbar to appear. 

Userlevel 7
Badge +17

This may not be helpful, but I just want to pose the question. If the panel is required because of the use of Tabs, and the panel is the cause of the scrolling, what if you show/hide just the repeating section, removing the panel? It looks like the repeating section is the only control for that tab. Since the repeating section auto grows on its own and is then limited by the panel. Maybe this isn't an option, but wanted to throw the idea out there.

Badge +3

Hi,

Insert Repeating section inside Panel, Go to Panel Configuration settings. In advanced Section Resize at  Run Time selected as YES

Badge +4

Thanks for the replies and suggestions - none of that worked for me - but I was able to use css as suggested by chaitra and got it working !

Thanks Chaitra for your continued help!

Badge +8

Your welcome !!

Reply