My own custom form layout with DFFS running behind it?

[Jonathan Stamper]

Is it possible to create my own custom form layout using HTML and something like Bootstrap but have DFFS still run behind it for rule/validation and vlookup setup?

I’m looking to convert an InfoPath form, retaining some of its complex formatting and layout as much as possible (html table with varying row and column spanning, padding, margins etc.)

It almost seems better to take the html from inside the original infopath form and build that way but I wasn’t sure if DFFS could accommodate.

[Alexander Bautz]

Hi,
This will unfortunately not work. The reason for this is that DFFS uses the default save function and the form fields must be in the original form element and have the correct IDs for this to work.

The side-by-side is a bit complicated to set up because you must fight with the default SharePoint styling, but I have seen some pretty complex forms created.

If you can show a screenshot of what you are trying to replicate I’ll see if this is possible.

Please remove any sensitive information from the screenshot.

Alexander

[Jonathan Stamper]

Sure! Thank you for your response. This is a dummy version of what I’m looking to recreate. You can see the dummy date fields are bunched up on the right side like it’s multiple cells merged into one. That’s the part I’m trying to figure out how to set up.

[Jonathan Stamper]

Apologies I didn’t submit image

Attachments:

1. 

   50207BF1-AF9A-4C4B-AF81-853976426501.png
   

[Alexander Bautz]

Sorry for the late reply. This exact layout is not possible because the basic form is a table with two columns and there is no way to use rowspan on the table cells.

This means you can either add the date fields side by side with 3 date fields in each row for a layout like the attached screenshots, or add each date fields side-by-side with one or more other field in multiple rows.

In addition to what you see in the screenshots I used this in Custom CSS:

.customHeader{
    font-size:24px;
    padding:5px 10px;
    background-color:#1B619B;
    color:white;
}
.ms-formtable input[type=text]{
    width:100%;
    box-sizing:border-box;
}
.ms-formtable textarea{
    width:100%;
    box-sizing:border-box;
}
.ms-formtable select{
    width:100%;
    box-sizing:border-box;
}
.sbs_FieldTable{
    width:100%;
}

Let me know if you have any questions.

Alexander

Attachments:

1. 

   sbs_1.png
   

2. 

   sbs_2.png
   

[Jonathan Stamper]

I had a feeling so I modified it exactly as you mentioned and went with the side by side approach. Also thank you so much for the styling, that is super clean compared to my “hack-n-slash.”

[Alexander Bautz]

I’m glad you figured it out.

Alexander

[Jonathan Stamper]

2 more questions if you don’t mind me asking:

Is there a way to include html above the tabs or should I use the script/content editor webpart for it?

Tab css customizations can be done in the Tab Name section but if I wanted to do it in custom css do I reference the tabBase class?

[Alexander Bautz]

1: You can add HTML in the Misc tab “Tab > Show this text above the tabs” textarea to add HTML – of you can just use custom js to prepend it using code like this:

jQuery("#tabWrapper").prepend("<div style='color:red'>test</div>");

2: Yes, you can add style targeting all elements in the page in the custom css so overriding the tabBase class is OK. Please note that you should right click > inspect the element you try to override because you might need to address it with a bit more than just the class to select the correct item – like this:

#tabWrapper .tabBase a{
  background-color:green!important;
  color:white!important;
}

Alexander

[Jonathan Stamper]

Got it that’s right, the Misc Tab. Speaking of that I thought there was an option to hide detail/descriptor info on fields? I ended up hiding them in css so no issues there.

That makes sense with the css elements in your example. I overlooked the anchor tag and thought the current tab styling was being done at just the tabBase class level. I’m still re-learning css after years of not using it.

I greatly appreciate it, thank you for all the help!

[Author]

Posts