7

I'm using the Alchemy Framework 0.62 and have a GUI Extension opening a .ASPX page in a popup.

I want to use the Bootstrap CSS library in the popup. What is the best way to do this?

I'm pulling down Bootstrap with Nuget. I see Alchemy has many nice URL helpers (Static File Tokens) here.

I also see a nice explanation about JavaScript files and what happens on build here.

Should I move the Bootstrap css files to a folder under the static folder? Will Nuget find them there? What's the best practice?

I'm also planning to use the SignalR library, and Nuget creates a 'Scripts' folder and puts all the .js files in there. Is that OK? I see that the latest version of Alchemy puts all .js files in their own folder at build time.

2 Answers 2

6

With static files such as JS and CSS files, they are required to be placed into a folder either named "Static" or "Assets". As you mention, Alchemy will then sort these files into a standard folder structure in the compiled .a4t file, with all JS files going into a JS folder, same for CSS, etc., with the exception being files placed into a "libs" folder, which will preserve their folder structure to allow for some libraries requiring a specific organization of files, as described in the documentation you linked to.

So, to answer your question about SignalR files being placed into a Scripts folder, these will not be found by Alchemy since they aren't in a Static or Assets folder. The simplest solution is to just copy the folder for both Bootstrap and SignalR into a Static folder. However, this would mean that Nuget would in fact lose track of these files, and you would have to continue to move them manually in the future if you wanted to update a package with Nuget. Luckily, Nuget itself provides an option to resolve this. As discussed in this post, you can now change the package location for Nuget by including a nuget.config file in your solution and using it to redirect the files downloaded by Nuget into an Assets or Static folder, in which case Nuget could keep track of the files and Alchemy would still be able to find them.

I would also submit an issue to the Alchemy github to have them consider adding Bootstrap and/or SignalR to the current selection of libraries if you feel these would be useful to other developers.

1
  • 2
    Great explanation! Just want to confirm for Robert that since the Bootstrap library contains multiple files (with icons being in a specific location in comparison to where the css lives), you should definitely go with the JavaScript Library approach that Tanner mentioned. "/Static/Libs/Bootstrap/FILES HERE".
    – Alex Klock
    Commented Oct 19, 2015 at 14:08
4

What I'd do:

  1. add your JS and CSS files inside Static->Scrips and Static->Styles respectivly. It's a fixed structure in Alchemy.

  2. Create a resource group object extending the ResourceGroup base class. say "Mynamespace.MyResourceGroup"

  3. In the constructor use AddFile method to add the files.

enter image description here

  1. Add your ResourceGroup to your Extension object. Using Dependencies.Add<MyResourceGroup>() or AddExtension<MyResourceGroup>("Tridion.Web.UI.Editors.CME.Views.{ViewToBeExtended}") , depending on your extension.

  2. in your ASPX page add the resource group something like below:

    <head runat="server"> <title></title> <cc:tridionmanager runat="server" editor="CME"> <dependencies runat="server"> <dependency runat="server">Mynamespace.MyResourceGroup</dependency> </dependencies> </cc:tridionmanager> </head>

You can access it using token "${CssUrl}MyStyle.css" as well, but make sure your css file is present as a resource

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.