My own custom form layout with DFFS running behind it?

Forums Dynamic Forms for SharePoint My own custom form layout with DFFS running behind it?

Tagged: 

Viewing 7 reply threads
  • Author
    Posts
    • #33610
      Jonathan Stamper
      Participant

      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.

    • #33612
      Alexander Bautz
      Keymaster

      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

    • #33614
      Jonathan Stamper
      Participant

      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.

    • #33616
      Jonathan Stamper
      Participant

      Apologies I didn’t submit image

      • #33629
        Alexander Bautz
        Keymaster

        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:
    • #33650
      Jonathan Stamper
      Participant

      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.”

    • #33662
      Jonathan Stamper
      Participant

      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?

    • #33666
      Alexander Bautz
      Keymaster

      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

    • #33668
      Jonathan Stamper
      Participant

      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!

Viewing 7 reply threads
  • You must be logged in to reply to this topic.