[Travis Goodman]

The more I play with it, the more inconsistent it gets. I’m wondering if the form is loading before all my rules trigger. Let me play with this a bit more. Like when I refresh, the fields I see are inconsistent with what I would expect.

[Travis Goodman]

Actually, yeah this is a legitimate problem. Consider this scenario:

Form has a column called Status. Status is a choice field with Submitted, Pending, Completed choices.

Rule 1 = If Status is equal to Submitted, then field Assigned To should be optional. This will automatically reverse Assigned To to be Required if the rule is false. Perfect.

However, Rule 2 = If Status is equal to Completed, then all fields should become read-only so no one can go in and change anything after the item was already marked completed.

Expectation with Status = Completed is that Rule 1 would make Assigned To required, and since the item is completed, Rule 2 would make it read only so no one can manipulate it.

Reality is that Assigned To is left editable because Rule 1 makes it required, which is making it permanently editable.

Problem.

[Travis Goodman]

I can’t believe I forgot to mention this before, but I’m using SharePoint Online. Pretty important detail I failed to mention.

[Travis Goodman]

So I’m running into an issue. When I copy the link to the DFFS_Installer_CDN.html file to my CEWP in my target site, the CEWP throws back the following error: Cannot retrieve the URL specified in the Content Link property. For more assistance, contact your site administrator.

I assume it’s being blocked because it’s cross-site. Not sure how to get around this. It’s definitely not permissions, because I have the centralized site set to everyone.

[Travis Goodman]

This will not save configs in the centralized location – they will be saved in each site that uses DFFS (all your target sites).

The option to Load DFFS and vLookup configurations from CDN that you can check in the CDN installer cannot be used in your scenario as it would not allow for changes being made in each of the target sites. It would only apply if your target sites all were an exact copy of your “centralized” site and you wanted to have the config centralized.

I’m ok with the form configurations being saved in the target site collection, and I prefer that. I’ll try this out tomorrow.

To make sure I understand, I do NOT want to check to load DFFS and vLookup configs from CDN, right? And it’ll know to use the configurations library on the local site?

[Travis Goodman]

Ok, running into some issues here that may be due to my never having done the CDN method.

So I’ve got the files on my “centralized” site collection, what files (if any) do I need on my target site collection that will reference DFFS from the centralized site?

If you check the DFFS_Loader_CDN.html file is loaded from CDN checkbox in the DFFS Installer for CDN and follow the instructions to upload the completed file you can centralize this also.

For this quoted piece above, what instructions to upload what completed file, and where am I uploading it to?

Lastly, will this method automatically save configurations to the centralized site for me as I make updates, just like it does currently when I have it installed locally on each site? Or how does it work with updates being made? Like say I add a new rule to a list, does that automatically get saved to the centralized site location?

I will definitely be sending you a tip once this is all setup, I really appreciate your assistance with this.

[Travis Goodman]

So my question would be what kind of solution can be done for users with enterprise licenses that want to manage from a single location? Currently, if I have like 10-15 site collections, I have to go to each one individually to upgrade the DFFS version, then I also have to maintain 10-15 custom CSS/JS files, and then I also have the license code out there 15 different times where someone snooping around could just happen upon it. There’s just a lot of risk and a lot of redundancy I’d like to eliminate if at all possible. Do you have any thoughts on this, or just straight up it won’t be possible?

[Travis Goodman]

Hi all! Glad to see people are finding value in this custom CSS configuration. I actually have made some more updates to it to even further improve upon it, but of course styling is subjective, so feel free to adjust the styling to your personal preferences. I hope to get the updated CSS posted in here in the next week or two.

[Travis Goodman]

Hi Alexander, I’d like to see if an enhancement can be made for the “If user is in group with ID or name” and the alternative “If user is NOT”.

The enhancement would be for it to be able to recognize users who are in the group, but by way of being in an AD-Group that is in that SharePoint group. So the users profile isn’t directly added, they are just in the AD-Group.

I know you have a workaround for this that requires a custom JS function and a triggered rule from that function, but am wondering if since that was created in 2016 perhaps there has been some new way to get that to work from the already configured rule without having to go through all that setup.

Reason for the ask is that I use that rule quite often, and recently was able to automate my active directory groups for effortless permissions management. I only started using AD groups recently, and found out the hard way that it doesn’t work with the rule as it is now.

[Travis Goodman]

No worries, Alexander. You will probably be able to come up with something better than what I have there, as I wrote that to work around your built in CSS classes, and you might be able to identify areas where you can improve the overall layout. I’ve even tweaked it a couple of times already since I posted this. For me, while flex:1 gets the job done, I didn’t like how if one row had 4 columns and another row only had 3 columns, they didn’t line up vertically, so I instead am using a standard column width which accommodates the width of peoplepicker and date fields, and then making it all uniform. Still a work in progress, but this is a great start for anyone looking for a design that will make your forms look “not like sharepoint”.

Also, VERY IMPORTANT this design is built around the side-by-side settings set to Stretch side-by-side fields over both form columns (hiding the field label) – This MUST BE CHECKED! Or else this css will look like garbage.

[Travis Goodman]

It’s all yours! You can change whatever you feel needs changed, css requirements are always in need of personal tweaks anyway.

.dffsTabRow {
    border: none !important;
}

.tabH1 {
    text-align:center;
}

.ms-formtable h2,
.ms-formtable h1 {
    color:dodgerblue;
}

.ms-formtable tr[id^="dffsHTML_"] a {
    font-weight:bold;
}

#part1 select,
#part1 input:not([type="checkbox"]):not([type="radio"]):not(.sp-peoplepicker-editorInput),
#part1 .sp-peoplepicker-topLevel,
#part1 .ms-rtestate-field.ms-inputBox,
#part1 textarea {
    border: 1px solid #ABABAB;
    border-radius: 4px;
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
    -moz-box-sizing: border-box; /* For legacy (Firefox 29) Gecko based browsers */
    box-sizing: border-box;
}

#part1 input:not([type="checkbox"]):not([type="radio"]):not(.sp-peoplepicker-editorInput):focus,
#part1 .sp-peoplepicker-topLevelFocus,
#part1 .ms-inputBoxActive:focus,
#part1 select:focus,
#part1 textarea:focus,
#part1 .ms-inputBoxActive .ms-rtestate-field:focus{
    box-shadow: 0 0 10px;
    border:1px solid #B0CFE0;
}

td.accordionHeading div {
    color: dimgray!important;
    border: thin lightsteelblue solid;
    background-color: paleturquoise;
    font-size: x-large;
    margin-top:0px!important;
    text-align:center;
    font-weight: lighter;
}

tr[id^="dffsHTML_"] .dffs_headingOrHTMLWrap {
    padding: 0 10px;
    max-width: 900px;
}

.ms-standardheader {
    font-size: 17px;
    color:steelblue;
    margin-right: 0px!important; /*When a customToolTip is used, it adds a margin-right of 20px which isn't necessary*/ 
}

.ms-formbody,
.ms-formlabel,
.dffs-readonly-inner {
    padding: 10px!important;
}

.ms-formlabel{
    width:130px!important;
    white-space:normal!important;
}

.ms-formtable > tbody > tr {
  background-color:  #eee;
}

.ms-formtable > tbody > tr > .ms-formlabel,
.ms-formtable > tbody > tr > .ms-formbody,
.ms-formtable > tbody > tr > .dffs-readonly-inner {
    border-top: thin solid lightgray;
}

.ms-formtable {
    margin-bottom: 10px;
    border: 1px solid lightslategray;
    box-shadow: 0 0 10px;
    border-radius: 4px;
}

.sbs_FieldTable *{
    width:auto!important;
}

.sbs_OuterTable {
    width: 100%!important;
    border-top: thin solid lightgray;
}

.sbs_InnerTR .spjs_casc_multi,
.sbs_InnerTR table[id^="casc_multiselect"] {
  width:100%!important;
}

/* Ensure the tooltip icon won't collapse */
.customTooltipIcon{
    width:18px!important;
}

.customTooltip{
    float:none!important;
    display:inline!important;
    margin-right:5px;
}

.sbs_InnerTR {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start;
}

.sbs_InnerTR td[class*="sbs_tdIndex_"] { /
    width: 250px;
    align-self:  stretch;
    text-align: left;
    /*! flex: 1; */  
/*Use flex:1 if you want your sbs columns to stretch the entire width of the form, otherwise leave it off if you want your columns to always line up.  Example, if you have a sbs row with 4 columns, and below that you have a sbs row with 3 columns, then without flex:1, the columns will line up evenly, but with flex:1 turned on, then they will space out using all the available width.  They will still look good, just won't be all lined up*/
}

.ms-rtestate-write {
    text-align: left;
}

.ms-rtestate-write * {
/*I hate it when people use custom font*/
    font-family:sans-serif!important;
    font-size: small!important;
}

.sbs_Field select {
/*If you have a select option with a really long text string, this will make it so that it doesn't bleed over into its neighbors column*/
    max-width: 230px!important;  
    text-overflow: ellipsis;
}

.sbs_Field .ms-rtefield {
    min-width: auto!important;
}

.sbs_FieldTable .sp-peoplepicker-topLevel, 
.sbs_FieldTable .sp-peoplepicker-topLevelDisabled {
    min-width:200px!important;  /*These shrink up horribly when used in sbs*/
    text-align:left;
}

td[id$='_casc_btnWrap']{
    padding-top:14px;  /*Better aligns the add/remove arrow buttons for multi choice cascading dropdowns*/
}

.ms-RadioText {
    white-space:nowrap;  /*makes multi-choice radio checkboxes easier to read instead of wrapping and looking messy*/
}

.sbs_FieldLabel{
    height:auto;
}

.dffs-readonly-inner {
    min-width: auto!important;  /*Overwrites the min-width that gets set automatically which made the form format extremely wide on occasion when there is a lot of text in a field*/
    padding: 10px;
}

.sbs_Field .ms-metadata {
    display:none; /*I recommend using the DFFS Tooltip, as the metadata for field descriptions was giving me formatting issues.*/
}

.sbs_InnerTR table[id$='DateTimeFieldTopTable'] {
    /*! margin: 0 auto; */  
    /*Only use this if you use a text-align:center for your display:flex children*/
}

.sbs_Field .ms-rtestate-field.ms-inputBox,
.sbs_Field textarea {
    max-height:200px;
    overflow-y:auto;
    resize: vertical;
}

#idAttachmentsRow {
    background-color: lightsteelblue;
}

#idAttachmentsTable td img {
	margin-left:20px;
}

#Attachments {
    color: #444!important;
}

#Attachments > nobr {
    vertical-align:middle;
}

[Travis Goodman]

Funny you say that Alex, because that is actually what I have built my Custom CSS around is display:flex.

I have altered your sbs_tdIndex display settings to change it to flex, and then have hacked up the rest of it to cooperate. I’m sure you can make it better than what I have since I’ve tried to basically overwrite the core script, but I’m more than happy to share what I have.

Attached you will find screenshots showing the customization’s I’ve made. They are available to you if you’d like them.

Attachments:

1. 

   Screenshot_2019-04-24-Disability-Form.png
   

2. 

   Screenshot_2019-04-24-PMO-Projects-New-Item.png
   

3. 

   Screenshot_2019-04-24-Disability-Form-2.png
   

[Travis Goodman]

I have an idea that I don’t think currently exists. Could it be possible to set a default Custom CSS for every form? Right now, I copy my CSS from every single form onto any new forms I create. I’d like to see a way that I can have a default CSS automatically applied to every instance of DFFS I have, and then I can do further Custom CSS for the specific list from within the backend.

[Travis Goodman]

I’ll take “Ways to feel stupid” for $500, Alex! 🙂

I am laughing at myself right now, I totally missed the latest update to DFFS that has this, and I’m over here thinking I had a great idea haha. Thanks! I will upgrade to the new DFFS later this week. Donation incoming! Thanks for all you do, Alex.

[Travis Goodman]

Update #2: DCH, contact me when you return, I figured out the root cause of all of this.

Alexander, rest easy. This is not something caused by any of your work, it’s from a 3rd party plugin that I believe DCH is also using that was causing the issues resulting in the XML errors.

[Author]

Posts