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

[Travis Goodman]

Update: I FIGURED THIS OUT!

My company loads a version of jQuery automatically into our SharePoint sites. It’s 1.11.3, there’s nothing we can do about it.

I added a line of code in my SharePoint Master Page to load jquery 1.12.4, because I know that’s what you use for DFFS, and I have it at the bottom of the master.

Out of curiosity, I added console logs in the spjs-casc.js file to see which jQuery version it was recognizing on start. Sure enough, it was capturing the 1.11.3 version and not the 1.12.4 version when it is initially loaded. Bingo, problem found.

I moved the invocation of 1.12.4 to the <head> of the master page, after the default .js invocations, and I added Defer=”True”, and I removed where I had LoadAfterUI=”true”, I took that piece out altogether.

Now it’s working perfect!

My console errors dropped tremendously as well. I’m no longer getting the TypeError: a is undefined at all, but I was getting the XML Parsing Error 3 times all at once, now I’m only getting it 1 time.

So I still need to figure out why I’m getting even 1 instance of XML Parsing Error, but it’s better than 3, plus my cascading dropdowns are working perfectly again.

I tested the same console logs to make sure that the 1.12.4 version were capturing on load, and they are.

[Travis Goodman]

I’d like to follow up on this, as I have just noticed I am having the exact same issue, however I am only having this problem in FireFox. It’s working fine in Internet Explorer.

I’m not sure if this is truly indeed the root cause of the problem, but I noticed it when I have a cascading dropdown where the lookup column may have blank values.

If I move that column to the very top of the cascading dropdown, it doesn’t give me any choices to choose from at all.

The column in question is a people field.

I’m also getting XML Parsing Error: not well-formed errors, but I cannot click to see where exactly the error is in the code.

So as an example, I’ll have the following cascade setup:

Title,PeopleField/Title

Now the title field has values for all records, but only some records will have values in the associated PeopleField. Instead of showing me the choices of the PeopleField, it’s just not showing me anything at all, which I assume is because some values are blank.

It’s at this point in the process where in Firefox I get this error: TypeError: a is undefined

Again, this is not an issue in Internet Explorer.

DFFS v4.4.2.8
CCDD v3.6.9

• This reply was modified 5 years, 10 months ago by Travis Goodman.

[Travis Goodman]

Hi Alexander, no worries!

I did find a bit of info in your change-log for SPJS-Lookup that describes exactly the functionality I’m hoping you can implement for cascading dropdowns, which is

addYouOwnValue

on: true or false. This controls whether or not to show a link to “kill” the dropdown and show the underlaying text field.

Just something to keep in mind, thanks for all you do!

[Travis Goodman]

Checking back in, I just installed the latest version of DFFS and this dropdown functionality works perfectly now! You are the MAN!!!

[Travis Goodman]

Thanks for looking into it Alex. Excited to see what you come up with. Don’t know what I’d do without this software.

[Travis Goodman]

Hi Alex,

Following up, and yes I am able to use a multilookup column, but I cannot use it anywhere in my configuration. I’m attaching a few screenshots to make sure I describe the issue (and my request) as best I can.

So I have a source list, we’ll call it Test1 (see image labeled Test1 for this). That has 3 columns:

TestColumn = Single Line of Text
Lookup1 = Lookup Column (allow multiple choices)
Lookup2 = Lookup Column (allow multiple choices)

Then, I have a list called Test2 which has 3 columns that I’m using for Cascading Dropdowns, you can see the configuration in the image labeled CCDD:

Test1 = Single Line of Text
Test2 = Multiple lines Text
Test3 = Single line of Text

You’ll notice in the image labeled CCDD that my column labeled Test1 is assigned to the multichoice lookup column labeled Lookup1 in the source list.

Then, in image labeled Test2, you’ll see that the Test1 column works, I can select from the multichoice column, but the subsequent dropdowns do not work. Multichoice columns in the source list can only be used as the very last configuration.

So what I’m needing (and this is possible in SPServices Cascading Dropdowns, but overall yours are better), but what I need is to be able to have the multichoice column that I’m looking to in the source list be able to work anywhere in the configuration, not just the last step.

Am I making sense? So basically, in image Test1, I want the column called Lookup1 to be able to be in the middle of my configuration and all the dropdowns still work.

Attachments:

1. 

   CCDD.jpg
   

2. 

   Test1List.jpg
   

3. 

   Test2.jpg
   

[Author]

Posts