SPCasdadedDropdown not handle "Required Field" in O365

May 29, 2014 at 4:54 PM
Edited May 29, 2014 at 11:10 PM
Hello Marc,

As you redirected me I'm here now. Here is my issue:
I have three lists:
  • Project Type
  • Projects
  • Project Task
I'm using jquery-1.11.0.min.js, jquery SPServices 2014.01.min.js and jquery-ui.js on my O365 SharePoint.
I read that SPServices 2014.01 handles the "Required Field" changes but it seems not for me.
Here is my code:
$(document).ready(function() {

$().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: "Project Type Required Field",
childColumn: "Project Required Field"
});

$().SPServices.SPCascadeDropdowns({
listName: $().SPServices.SPListNameFromUrl(), 
relationshipList: "Project Tasks",
relationshipListParentColumn: "Project",
relationshipListChildColumn: "Title",
parentColumn: "Project Required Field",
childColumn: "Project Task Required Field"
});

});
This works in Chrome. In Chrome this is not working if I left "Required Field" postfix.

In IE11 the code works as above if I have no more then 20 item in that lists. If the list has more then 20 items the list shows its name as "Project" not "Project Required Field" and "Project Task" not "Project Task Required Field"...


Do you have any suggestion? How should I change the code to work in both IE11 and Chrome?

Thanks,
Gabor
Coordinator
Jun 2, 2014 at 1:37 PM
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.
Jun 4, 2014 at 4:36 PM
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)
Image

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


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:
Image


IE:
Image


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