We have SharePoint Online and are using Plumsail to style our forms. We want to be able to move the entire command bar below the form instead of having it sit at the top. I'd like to try to do this with JS instead of fiddling with CSS. JQuery doesn't seem to work or I'm not targeting the right fields. My JS skills are novice and I haven't found a working method yet so would appreciate any advice. Thank you!
Hello @JClark,
Welcome to Plumsail Community!
You can use this code to move the command to the bottom of the form. It works for forms that are opened in a full screen forms and in a panel.
fd.spRendered(function() {
var cmd = $('.fd-form.ms-CommandBar');
$('.fd-form.ms-CommandBar').remove();
if (fd.isPanel) {
$('.fd-form-container_panel').append(cmd);
$('.fd-form-container_panel').css('padding-bottom', '36px')
$('.fd-form-container_panel').css('padding-top', '0px')
} else {
$('.mainContent').append(cmd)
}
});Hi @mnikitina,
Thank you! That worked and when I looked at your solution, I could see what needed to be targeted much better. I did simplify it once I could see what you were doing but whether it's my simplified code or your original code, I encountered a strange problem. When there is more than one form on the page, (I've embedded 2 forms in web parts in SharePoint on the same page), the buttons are doubled on the page for all forms. It's odd b/c even though it's affecting another Plumsail form on the page in terms of doubling the buttons, it's not moving that button below the content for the form that doesn't have the code explicitly added. Do you have any advice on how to prevent the buttons from doubling when more than a single form is on a page?
Otherwise, this worked perfectly and thank you so much for you help! I'm including a screenshot of the effect. The bottom form has the JS applied in the Plumsail program in the JS section. The top form with the button at the top of the form does not- it has no custom JS added at all. Thanks again for any advice!
Sincerely,
Jewel
Hi again, @mnikitina,
Just a quick update. I added the code you supplied back in b/c I realized I'd omitted handling the panel view but when opening a panel with your code in it, the buttons disappear entirely- and they don't do that on a page with your code. I made sure I hadn't added any CSS etc., that might have caused this. My version works fine on a page and in a panel, but the buttons in panel view are fixed to the bottom of the panel, which I don't want. I've been unable to remove the fd-fixed-toolbar element to get the buttons to sit just under the form- I don't think I've figured out what to target correctly. Here's my initial code, which works great on a page and works find in a panel but the .fd-fixed-toolbar element is causing me layout problems.
fd.spRendered(function(){
$(".fd-form.ms-CommandBar").insertAfter(".fd-grid");
});
I changed to position to just below the form with fd-grid rather than using the main content element so the buttons wouldn't be stuck to the bottom of the page.
I have also tried this for the panel view and apart from the fixed position of the toolbar, it works great. The "???" in my code is there to show you where I think I'm going wrong. If I just delete the class in dev tools on the page, the panel does what I want. No amount of tried classes (and I tried a lot) where those ??? are has resulted in that fixed toolbar class getting removed.
fd.spRendered(function(){
if (fd.isPanel) {
$(".fd-form.ms-CommandBar").insertAfter(".fd-grid");
$(".???").removeClass(".fd-fixed-toolbar");
}
else {
$(".fd-form.ms-CommandBar").insertAfter(".fd-grid");
}
});
If you have any advice on what to target to remove that fixed toolbar class, I would be very grateful. Thank you!
Do you have two forms in a panel too?
If there is only one form, please use my code for the panel view:
if (fd.isPanel) {
var cmd = $('.fd-form.ms-CommandBar');
$('.fd-form.ms-CommandBar').remove();
$('.fd-form-container_panel').append(cmd);
$('.fd-form-container_panel').css('padding-bottom', '36px')
$('.fd-form-container_panel').css('padding-top', '0px')
}Hi @mnikitina,
I don't have 2 forms in a panel. I have 2 New view forms on a SharePoint page in separate webparts. The code causes the buttons to double up on each form. Please see the screenshot. As written, your code caused all the buttons to disappear in panel-view and they were stuck to the bottom of the screen in page view.
I was able to use the code you originally supplied to target different CSS classes to get the buttons to show back up and not be stuck to the bottom of the page, but I'm still dealing with needing to eliminate the duplicate button issue. I'm having one other issue, I'll need to get back to you about tomorrow. The code that ultimately worked for all instances except when 2 forms are on a page and when there's a very long submission was:
fd.spRendered(function() {
var cmd = $('.fd-form.ms-CommandBar');
$('.fd-form.ms-CommandBar').remove();
$('.fd-form-content').append(cmd);
});
Please let me know if I've completely mangled the fix you supplied but I promise it was not working in panels at all, I needed to try some other classes at the very least. When I did, I discovered the fd-form-content class worked for both pages and panels so I omitted the if statement for panels as it seemed unnecessary at that point. I'm happy to be corrected and appreciate your help. Thank you!
Sincerely,
Jewel
Hello @JClark,
I'm sorry, this code doesn't work on my forms opened in a panel and in full screens:
Since you need to open a form on a panel, in full screen mode, and on a page that displays multiple forms, I would suggest hiding the panel and adding buttons that replicate the behavior of the toolbar buttons to the bottom of the form:
Hi @mnikitina,
Interesting! I wonder why we are getting such different results. I'll investigate further but for now, since the code I altered is working everywhere except the new form view in a web part when more than one form is on a page, I will try the custom button approach you mentioned and also look into something like a for each loop that might be able to target each form instance separately so that the command won't run on each form twice, which is what I think is causing the new view issue when there are multiple forms on a page. Appreciate your help and if I come up with additional code to solve the multiple form issue, I'll post here!
Sincerely,
Jewel