Edit / Amend Layout

Is there a way to amend the standard layout format in Plumsail Forms, we have previously used Forms Designer and have hundreds of forms set up, on almost all forms we use vertical Orientation for our fields as having the field title above left of the field itself seems to make sense to our users and fits with previous systems they have used.
Looking at making the switch to Plumsail Forms I have recreated a number of forms but found the layout is really quite poor compared to Forms Designer, below is a screenshot of one of our display forms created with Forms Designer, with no real changes apart from changing the orientation and making the title Bold and coloured.
image

Below is a screenshot taken from a display form created with Plumsail Forms, the spacing on the table is very poor, making it really difficult to tell what data belongs with what title, plus the amount of screen size used for so few fields means we will have very poor UX for large forms with users having to scroll much more than they should, I have even reduced the vertical padding on the fields down to 0, but it has made no real difference...

There simply has to be a way to amend this as without that our client will simply not accept the forms, in the screenshot above why is there such a huge amount of padding between the title and field data?

Looking forward to your response...

Dear Tony,

Please try to add this CSS rule in CSS Editor of your Display Form:

.fd-form .col-form-label {
    padding-top: 0;
    padding-bottom: 0;
}

Hi Alex,

Thank you that alone has made a big difference…

One more thing, not sure if this is a Plumsail Forms thing or a modern experience thing but I and lots of our regular users are used to tabbing around a form to complete the fields and I generally only really touch the mouse once the form has loaded to save the Form. But it seems that this is not possible on Plumsail Forms tabbing to a Lookup seems to highlight the field but if I then begin to type so as to perform a search on the lookup nothing happens.
I physically have to click the lookup field with my mouse to activate it and then again if I then start to type, as the Lookup filters when the option I want is in the top two or three I would just hit the down arrow and then return when the correct option is highlighted, this seems hit and miss as to if it populates the field at all, and if it does it only ever selects the top option even if I have hit the down arrow 3 times! There is also something not quite right even if the field is populated this way as the validation on the field fails unless it is clicked with a mouse!
Not ideal for user experience, any information would be good on this…

Dear Tony,

If you are working on Windows, try “Alt + down arrow” to open a lookup dropdown.

Speaking of a selecting value of a drop-down after typing some filtering string, I’ve reproduced this behavior and confirm that the issue exists, need to select a value twice with “Tab” or “Enter” before a field will be populated.

Thank you for letting us know on the issue. I’ve created a bug in our issue tracking system. I’ll keep you informed on its status.

Dear @Tony_Duke,

Also, anyone else reading the topic. The issue is fixed in the new version.

Hello @AlexZver @Nikita_Kurguzov @mnikitina

Reading the post's searching for an answer Alex just write about that this problem is fixed.

The question I have is related with the user experience filling data tables.

I have a free version of the platform Desktop Designer V 1.6.0 and I'm working so hard to create my custom form, I read all the support pages looking for and answer but nothing found.

This is the explanation of the problem:

1 - Copy fields from excel:

2 - Paste into data table and check the wrong result :

3 - The result expected :

Maybe there's some javascript function that could help me with the copy-paste and tab-enter problems, I think those are the same problem in some way.

Thanks a lot!

Hello @hdgallegot,

Welcome to Plumsail Community!

This functionality can be added to Data Table control.
The code below adds the 'Import' button to the toolbar. A user clicks on the 'Import' button and pastes any table data.
image

Please replace DataTable0 with the internal name of the control.

This code example is for Public Froms. For SharePoint forms replace rendered with spRendered event.

fd.rendered(function() {
var grid = fd.control('DataTable0').widget;
	
	grid.setOptions({toolbar: [
		'create', 
		{
			name: 'import',
			text: 'Import'
		}]
	});
	
	$('.k-grid-import').click(function(e){
	    // get the grid position
        var offset = $(this).offset();
        // crete a textarea element which will act as a clipboard
        var textarea = $('<textarea placeholder="Paste your text here..."></textarea>');
        // position the textarea on top of the grid and make it transparent
        textarea.css({
        	position: 'absolute',
			top: offset.top,
			left: offset.left,
			border: '1px solid grey',
			width: 200,
			height: 100
        })
        .appendTo('body')
        .on('paste', function() {
			// handle the paste event
			setTimeout(function() {
				// the the pasted content
				var value = $.trim(textarea.val());
				// get the pasted rows - split the text by new line
				var rows = value.split('\n');

				var data = [];

				for (var i = 0; i < rows.length; i++) {
					var cells = rows[i].split('\t');
						data.push({
							Column1: cells[0],
							Column2: cells[1],
							Column3: cells[2]
						});
				};
				grid.dataSource.data(data);
				
				textarea.remove();
			});
	    })
		.on('focusout', function() {
	    	$(this).remove();
	    });
		
		setTimeout(function() {
        	textarea.focus();
        });
	});
});

Hello @mnikitina Than you so much for your help.

The code works perfect! :exploding_head::dizzy: U Rock :sunglasses:!

I keep having the Tab - Enter problem and could be very helpful for all to fix it.
Please read the NOTE in red color of the image:

Example:
image

When a user hit Tab to go to the next column...

When a user hit Enter, after pressing nothing happens, no even exit from the column, don't save the changes:

Should be some kind of indentation control via keyboard input to change the effect in the any cell:

When Hit Tab --> Next column
When Hit Enter --> Next row

Fixing this we don't even need to create a import button, in the copy process, the clipboard store the \t and \n

Thanks for the help, I never use the forums, but is outstanding the way this community help :love_you_gesture:

Hello,
I do find this piece of code fantastic!
One problem: this textarea doesn't show. Do not even throw any error.
I have tried to apply it on Sharepoint on premise.
The code executes. I checked it inserting some console.logs, but it results textarea as undefined.

This solution would be very very nice to have.
Any idea?

Regards
Marcin

Hello @Marcin,

Try changing the position to fixed like so:

        textarea.css({
        	position: 'fixed',
			top: offset.top,
			left: offset.left,
			border: '1px solid grey',
			width: 200,
			height: 100
        })

Still the same.
It looks like textarea is below this form. I have commented out remove instruction and found it!
image

Focus works fine, I can paste table, on_paste works great also.
Just missing textarea on top of the window. I did try all known position parameters.

Regards
Marcin

@Marcin,

How do you open the form? In a panel or in dialog window?

It is just new form in panel.

@Marcin,

Please try out this code:

        textarea.css({
        	position: 'fixed',
			display: 'box',
			'z-index': 100000000,
			top: offset.top,
			left: offset.left,
			border: '1px solid grey',
			width: 200,
			height: 100
        })

Well, I tried with a bit lower z-index of 100 :smile:
Now it works perfect!

Thank you! My users will appreciate this nice feature!

Regards
Marcin

1 Like