New Post: SPCasdadedDropdown not handle "Required Field" in O365

sympmarc wrote:

Gabor:

If you are using 2014.01, then you shouldn't need to add the " Required Field" postfix. (In fact, you never should do it.) In SharePoint Online with the 2013 UI, the dropdowns are rendered the same in all browsers. With the 2010 UI, they are still rendered differently if there are 20+ items.

M.

Hi Marc,

Yes, I know I shouldn't use. But if I don't use, it don't work.
Here are a few screenshots and a little details:
I have three lists.
Project Type: Less then 20 items
Project: More then 20 items.
Project Task: More then 20 items.

Following code:

                var projectTypeFieldName = "Project Type Required Field";
                var projectFieldName = "Project";
                var projectTaskFieldName = "Project Task";
                var chrome = (typeof window.chrome === "object");
                
                if (chrome){
                    projectFieldName += " Required Field";
                    projectTaskFieldName += " Required Field";
                }

                    $().SPServices.SPCascadeDropdowns({
                        listName: $().SPServices.SPListNameFromUrl(), 
                        relationshipList: "Projects",
                        relationshipListParentColumn: "Project_x0020_Type",
                        relationshipListChildColumn: "Title",
                        CAMLQuery: "<And><Or><Leq><FieldRef Name='StartDate' /><Value Type='DateTime' IncludeTimeValue='False'><Today /></Value></Leq><IsNull><FieldRef Name='StartDate' /></IsNull></Or><Or><Geq><FieldRef Name='End_x0020_Date' /><Value Type='DateTime' IncludeTimeValue='False'><Today /></Value></Geq><IsNull><FieldRef Name='End_x0020_Date' /></IsNull></Or></And>",
                        parentColumn: projectTypeFieldName,
                        childColumn: projectFieldName
                    });
                    $().SPServices.SPCascadeDropdowns({
                        listName: $().SPServices.SPListNameFromUrl(), 
                        relationshipList: "Project Tasks",
                        relationshipListParentColumn: "Project",
                        relationshipListChildColumn: "Title",
                        parentColumn: projectFieldName,
                        childColumn: projectTaskFieldName
                    });

I put a primitive "Chrome detection" into my code to work with both browsers. I can hardcoded the variable values but in that case it works only in one type of the browsers (either IE or Chrome) depends on if I use the "Required Field" postfix and how many items are in my list. You can see I had to extend field names with "Required Field" in chrome. Also the list "Project Type" which has less then 20 items allways shows its name as "... Required Field". In IE the "Project" and "Project task" fileds also had the "Required Field" postfix before the items count went over 20.

And now a few screenshots with the code above:
In Chrome (Project Type less then 20 items, other 20+ items)


In IE (Project Type less then 20 items, other 20+ items):



Then I extended the code:

                var projectTypeFieldName = "Project Type Required Field";
                var projectFieldName = "Project";
                var projectTaskFieldName = "Project Task";
                var chrome = (typeof window.chrome === "object");
                
                if (chrome){
                    projectFieldName += " Required Field";
                    projectTaskFieldName += " Required Field";
                }

                    $().SPServices.SPCascadeDropdowns({
                        listName: $().SPServices.SPListNameFromUrl(), 
                        relationshipList: "Projects",
                        relationshipListParentColumn: "Project_x0020_Type",
                        relationshipListChildColumn: "Title",
                        CAMLQuery: "<And><Or><Leq><FieldRef Name='StartDate' /><Value Type='DateTime' IncludeTimeValue='False'><Today /></Value></Leq><IsNull><FieldRef Name='StartDate' /></IsNull></Or><Or><Geq><FieldRef Name='End_x0020_Date' /><Value Type='DateTime' IncludeTimeValue='False'><Today /></Value></Geq><IsNull><FieldRef Name='End_x0020_Date' /></IsNull></Or></And>",
                        parentColumn: projectTypeFieldName,
                        childColumn: projectFieldName,
                        simpleChild: true,
                        matchOnId: true
                    });
                    $().SPServices.SPCascadeDropdowns({
                        listName: $().SPServices.SPListNameFromUrl(), 
                        relationshipList: "Project Tasks",
                        relationshipListParentColumn: "Project",
                        relationshipListChildColumn: "Title",
                        parentColumn: projectFieldName,
                        childColumn: projectTaskFieldName,
                        simpleChild: true,
                        matchOnId: true
                    });

The extension are:

                    simpleChild: true,
                    matchOnId: true

Here are the results:
Chrome:



IE:



On both picture you can see 3 screenshots from Project Type, Project and Project Task fields. Nor of the texts are painted all are clipped when mouse was over the field.

You can see that Chrome allways calls "FieldName Required Field" independently if it has 20+ or less items in it.
In IE you can see it renders other the field if it has 20+ items and it calls "FieldName Required Field" if it has less then 20 and simple "FieldName" if it has 20+ items.

The screens are from O365. I could reproduce it in other O365 environment.


So I have a workaround but I think this is not a real and not a good solution.

Gabor