This project has moved. For the latest updates, please go here.

Jquery UI theme in SPEasyForms co-existing with other JQuery UI themes

Jun 23, 2015 at 7:51 PM
I am using multiple jquery UI themes in a site collection, and after deploying SPEasyForms, all of the pages that call jquery UI classes are using the styles in
/Style%20Library/SPEasyFormsAssets/2014.01/Css/jquery-ui/jquery.ui.theme.css.

As a temporary fix, I removed /Style%20Library/SPEasyFormsAssets/2014.01/Css/jquery-ui/jquery.ui.theme.css file, but of course this also removes the CSS from the SPEasyForms Editor interfaces. It is still usable.

It looks like SPEasyForms adds links to /Style%20Library/SPEasyFormsAssets/2014.01/Css/jquery-ui/jquery.ui.theme.css to all application pages in the site collection. I tried playing around with the placement of my CSS link to the Jquery UI theme on the page, but couldn't get mine to override the SPEasyForms link. What is the best way for the Jquery UI CSS links to co-exist? Write a javascript to remove the SPEasyForms link on desired pages?

Thanks!
Coordinator
Jun 24, 2015 at 1:14 AM
Edited Jun 24, 2015 at 1:55 PM
I don't have a very good answer for this right now, but I'll think about a long term answer. If the only problem you're having now is on the settings page (i.e. editor), open the file /Style%20Library/SPEasyFormsAssets/2014.01/Pages/SPEasyFormsSettings.aspx and add an html script reference somewhere in the content area with ContentPlaceHolderId='PlaceHolderAdditionalPageHead' pointing to any valid jquery UI theme and that should fix the editor for now.

As for a possible long term solution, the first thing I need to understand is are you using one jquery UI theme on some pages and a completely different theme on other pages, within the same site collection? If that's the case, I really don't know how to deal with that at the moment.

The problem is that there is no mechanism to insert a CSS into each page. There's an easy mechanism to insert a JavaScript reference into each page, which is custom actions of type ScriptLink, which is what SPEasyForms uses. To get the CSS into each page, my JavaScript is dynamically adding a script reference to the head element. That's why it's kind of hard to override.

If you just want to use a different theme than what I'm using, but the same theme site collection wide, you can just replace my theme with yours and you should be in business, but I'm guessing you could have figured that out. For the next major release of SPEasyForms (no target date yet), I'm considering the following options:
  • A site collection settings page where you can configure a different jQuery UI theme to be used site collection wide
  • A site settings page where you can override the site collection theme (or default) for a given site. This gets complicated and I haven't quite come up with a solution that I like, because it means I need to store a site-level configuration, and load it or try to load it on each page load, which give me performance angst. I could do something with the html 5 storage like I do for caching other stuff, but that gets hairy and confuses people too.
  • An option on the SPEasyFormsSettings.aspx page to override the site collection theme (or default theme) for the current list.
I think some combination of the first and third options is going to work best, but I haven't worked out all of the details yet. But I've known all a long that theme conflicts with other customizations was going to be my Achilles heal long term if I didn't deal with it. I'm definitely open to suggestions?

Joe
Jun 24, 2015 at 6:48 PM
Thanks for the quick reply and the options!

Correct, I have different sites in a single site collection where I am applying different Jquery UI styles. I think for now I will probably just replace your theme with the one I use most of the time.

I agree that for the next release a combo of the first and third options in your list will be best. Option 2 is probably overkill and wouldn't be used by most users, I would guess.
Coordinator
Jun 24, 2015 at 7:42 PM
Great, and you're welcome. I don't have a date for the next major release because I'm busy with other things right now, but I hope to release a new major version within the next few months (v2015.01). It will mostly roll up the add ons, but will also include some features like this one that are not so easy to do in an add on.

Joe
Mar 31, 2016 at 7:20 AM
I have the same request, any change it can be scoped by default to everything SPEasyForms touches? We are using JQuery UI (unscoped) on a homepage, something that does not involve any modifications from SPEasyForms.

I'm gonna do some tests myself with the JQuery UI scoping.

Thanks for the great work on this project btw, really great stuff.
Coordinator
Mar 31, 2016 at 3:09 PM
Edited Mar 31, 2016 at 3:11 PM
Hi,

I believe you may be talking about a different thing than this original thread. The original issue was that they wanted to be able to load one jquery-ui theme on one SPEasyForms form, and a different jquery-ui theme on a different SPEasyForms form. This is an issue I've already addressed in the latest release, since you can set the jquery-ui theme for list form individually.

I think what you're asking for is that if you're on a page that doesn't have SPEasyForms customizations applied, such as the home page, that SPEasyForms shouldn't load any jquery-ui theme at all? That way I wouldn't interfere with any custom jquery-ui theme you're loading. If I'm correct, that's a different issue and we should ideally open a new thread in the forum. But it is definitely not that difficult to do, I should have done it that way in the first place, and I could probably get out a 2015.01.02 with that fix in a week or two.

In the mean-time, there is a potential solution for your immediate problem. You can go to site settings -> SPEasyForms and change the default theme to be whatever theme you're loading on your pages. That way at least I'll be loading your theme everywhere, instead of my theme everywhere. One of the options in the SPEasyForms site settings page is to use a theme that you specify by path to the jquery-ui.css (i.e. ~sitecollection/Style Library/myjqueryuitheme.css). If you don't want to use that theme in your forms, set the theme for the list to something else in the SPEasyForms editor -> settings.

If I've completely misunderstood what you're asking for, let me know that too, so I can address you're actual issue.

Joe
Marked as answer by mcsheaj on 4/5/2016 at 7:45 PM
Coordinator
Apr 6, 2016 at 2:45 AM
If I'm not completely mistaken about what you want, I've added Issue 44: jQuery-UI Theme is Loaded on All Pages to the issues list to address your concern.

Joe
Marked as answer by mcsheaj on 4/5/2016 at 7:45 PM
May 19, 2016 at 8:32 AM
Hi Joe,

Srry for the late reply, indeed you're right & it does address my issue. Thanks!