Orchard 1.9 Layouts feature team

Topics: Announcements
Developer
Jul 8, 2014 at 9:14 PM
Edited Oct 15, 2014 at 1:16 AM
This thread is to discuss the Layouts feature for Orchard 1.9.

Current work can be found in the 1.x branch.
The goal of the Layouts module is to provide a visual designer where the user can layout rows and columns in a grid system, and add elements to this grid.

In a nutshell
  • Layouts are composed of Elements.
  • Elements can be moved around the designer surface in drag & drop fashion.
  • Grid, Rows and Columns are Elements.
  • Elements are categorized.
  • Elements are discovered using so-called Element Harvesters. This enables element discovery of strongly typed elements, widgets, snippets, content parts and content fields.
  • Layouts can be used as templates for other layouts.
  • The existing Widgets feature will be updated to take advantage of the design surface, where the layout is implemented as a predefined view. Columns here represent actual zones. Only widgets can be dropped here.
  • Blueprint elements allow the user to create predefined elements based on existing elements.
Jul 9, 2014 at 11:34 AM
Edited Jul 9, 2014 at 1:35 PM
This sounds really cool, I downloaded it but I cant seem to add any elements, they just disappear instantly. No errors thrown, tried with different features enabled. Browser was chrome. Had a quick look at the js but I don't really have time right now to begin to try and work out where it was going wrong. Plus it looked like a lot of js to trawl through :P But love the idea! ^_^
Jul 9, 2014 at 1:17 PM
Hi,

Orchard.Layouts module works well on the browser IE. I have been observing the development of feature/layouts branch, and it's great.

Thank Sipke
Jul 9, 2014 at 1:39 PM
Tried in IE after reading Vite's response, seems to be working fine.
Developer
Jul 10, 2014 at 6:31 AM
Thanks for the feedback guys.
@Hazza I'll try and see if I can reproduce the issues you mentioned in Chrome.
Coordinator
Jul 10, 2014 at 10:37 AM
How do Widgets works as elements? They are content items and elements aren't.
Jul 10, 2014 at 1:09 PM
It looks very nice but I begin to be lost in Orchard UI.
Usually I forget the placement file, fight with layers for widgets then start duplicating and adapting all the necessary view templates in my theme as I often use alternates, sometimes I create dedicated layout.cshtml based on url or languages. Now will I have to add playing with orchard.layouts ands its elements ?
Sometime I pray for some unity.
Developer
Jul 15, 2014 at 8:32 AM
Edited Jul 15, 2014 at 9:08 AM
@Sebastien - There's a Widget element that holds a reference to an actual widget content item by ID. So when it's time to render a widget element, its element-driver will load the widget and have it rendered using the content manager.

An interesting aspect of this integration is that I don't have to actually save the widget into the database - all I need is its input field values, which I can then use when invoking UpdateEditor on an in-memory widget item. This is how I was able to let the user create a new widget, but only persist it when the user saves the layout content item as a whole.

If the Display method of a content part driver had access to the controller, I could even go as far as never ever storing a widget into the database, because I could use UpdateEditor to reconstruct an in-memory widget item on the fly. This would save a content query per widget per layout.
Now we would have a layout that is entirely stored to and retrieved from a single content item's InfoSet: not just do the elements come from InfoSet; so would the widgets.

There's one change I had to make to Orchard.Widgets, namely: The WidgetPart.LayerPart property had to be made optional - in Layouts, we don't need a layer.
I do set the Container of the CommonPart though - I set it to be the content item that contains the widget (which is the content item that has the LayoutPart attached).
I made sure this change doesn't break anything else - it's backwards compatible.

So my one wish for Orchard 2.0 would be a more flexible Content Part Driver API where we receive a context argument (instead of the 3 arguments right now: part, displayType and shapeHelper), containing the 3 current arguments plus a reference to the controller.
Developer
Jul 15, 2014 at 9:02 AM
@Christian - Thanks Chris. Don't worry, it will become clear eventually. The nice thing about Layouts is that you don't have to use it at all, or you can use it and stop creating Layout shape view alternates entirely. But you do raise an interesting point there - using a dedicated layout based on a language (or any other rule that yields alternates). Should there be some sort of mechanism that determines the chosen layout? Food for thought.
Jul 15, 2014 at 7:56 PM
Edited Jul 15, 2014 at 7:57 PM
sfmskywalker wrote:
Should there be some sort of mechanism that determines the chosen layout? Food for thought.
Yes. Maybe something like the layer rules.
In fact, if you are ambitious about what the layout module should be you can expand its functionnality beyond the content zone and use rules as we do in widgets-layers.

Maybe some day we can remove the widgets admin menu. This will reduce the number of places where an user need to work with "presentation" and eventually make easier for new users to understand the "presentation layer" of Orchard.

I'm afraid I have no idea how to do that but, I'd like to see it in Orchard :)
Jul 15, 2014 at 8:57 PM
Edited Jul 15, 2014 at 8:58 PM
Layer rules are not easy to use, I would prefer something as alternates for layouts.
Aug 13, 2014 at 9:32 AM
The layout feature looks impressive.
One question.
Will we be able to add standard widgets to a layout from the add content dialog ?
giannis.
Coordinator
Aug 13, 2014 at 6:25 PM
No, Widgets are for Layers only, i.e. cross page content. But what will be done is another Layout editor on the page which will show the Theme Layout zones where you will be able to place "Layout Elements". It will fix the Layer Per Page pattern.

Another improvement will be that in the Widgets management page, the same Layout editor will be used to render the zones with their actual layout, like the thumbnail on the left, but interactive (drag n drop)

Lastly, the Content Type placement editor will be extended to provide placement definition using this same editor.


All these items are independent features that are on Sipke's todo list ;) Let's ask Sipke to create a donation page. NB: this is not a new idea, ping Bertrand who has thought on that some time ago.
Aug 13, 2014 at 6:47 PM
Edited Aug 13, 2014 at 8:51 PM
Great program. When working on widgets, it could be nice to add a flag saying: this widget will be on all layers.
EDIT: I don't mean something as Default Layer, if this flag is set, the widget could be added in several layers.
Developer
Oct 15, 2014 at 1:05 AM
Edited Oct 15, 2014 at 1:20 AM
Now that the Layouts module is part of the 1.x branch, it is time to discuss what elements should be provided out of the box; what elements should be provided by the Layouts module itself, what elements should be provided by other modules (if any, as it would take a dependency on Layouts), and what elements should be provided by new / custom modules.

The current list of available elements looks like this:

Content Item
This element enables you to pick one or more content items to be rendered "in-place" using a configurable display type. Very powerful.
The question that was raised today was: in addition to being able to select content items, should the user be able to create new content on the fly as well?

Html
This element enables you to add a text element to your canvas. Uses an HTML editor to author content.

Markdown (depends on Markdown)
This element enables you to add a text element to your canvas. Uses a Markdown editor to author content.

Paragraph
This element enables you to add a <P> element to your canvas. Uses a textarea editor to author content. Not that the element will surround your content with the <P> element when the element is rendered.

Text
This element enables you to add a text element to your canvas. Uses a textarea editor to author content. You can use this as plain text, but the element will render the contents "as is", so use HTML as you see fit.

Media Item
This element enables you to pick zero or more media items using the Media Libray Picker and to be rendered "in-place" using a configurable display type.

Image
This element enables you to pick a single media item using the Media Libray Picker. The reason we have an Image element in addition to a Media element is that this element will render as an <IMG> element to which any specified attributes such as ID, Style and InlineStyle are applied.

Grid
This element enables you to create a Bootstrap-like grid. It supports column offsetting, but currently lacks a way to specify breakpoints (it's on the TODO list).

CommonPart
This will render the CommonPart of the content item in place.

TitlePart
This will render the TitlePart of the content item in place.

BodyPart
This will render the BodyPart of the content item in place.

TagsPart
This will render the TagsPart of the content item in place.

Today a question was raised whether or not we should assign the various Part elements to their own feature, since not everyone has a need for these type of elements. Thoughts?

What other elements do you think should be available, and by which module?
For example, do we add a Taxonomy and Projection element? If so, should these be provided by the Layouts module, Taxonomy and Projection module, or should there be a Orchard.Elements module?
Oct 15, 2014 at 5:21 AM
  1. Please implement the Grid Part ASAP.
  2. Please provide a Check Box for the Common Part and the Title Part, so that it can ask whether to display the common and the title on the UI or not.
Oct 15, 2014 at 9:46 AM
Edited Oct 15, 2014 at 11:15 AM
Great work sipke.
Just a small issue when trying out the snippets feature .
https://orchard.codeplex.com/workitem/21004 and here
https://orchard.codeplex.com/workitem/21005.
Oct 15, 2014 at 12:51 PM
sfmskywalker wrote:
What other elements do you think should be available, and by which module?
For example, do we add a Taxonomy and Projection element? If so, should these be provided by the Layouts module, Taxonomy and Projection module, or should there be a Orchard.Elements module?
From my point of view, it should be provided by the Layout module, since I don't wanna have dependence on it for others orchard use scenario.
It could also be a separate module which rely on both Layout module & Projection module, making it flexible.

Great work so far !
Developer
Oct 15, 2014 at 10:52 PM
Edited Oct 15, 2014 at 10:52 PM
AkashLalDas wrote:
  1. Please implement the Grid Part ASAP.
  2. Please provide a Check Box for the Common Part and the Title Part, so that it can ask whether to display the common and the title on the UI or not.
  1. The Grid element is already available. What do you mean by Grid Part?
  2. Why do you need a check box to control whether or not to display these elements? If you don't want to display either of them, simply don't add these elements to your layout. Unless I'm not understanding your point. If so, please elaborate.
Thanks!
Developer
Oct 16, 2014 at 2:53 AM
giannik wrote:
Great work sipke.
Just a small issue when trying out the snippets feature .
https://orchard.codeplex.com/workitem/21004 and here
https://orchard.codeplex.com/workitem/21005.
Both issues have been fixed. Thanks for testing!

Out of the box, the Layouts migrations will turn the following elements into widgets:
  • ContentItem
  • Media
  • Text
Should we add/remove from this list?

This begs for an even grander question: should the current set of widgets be converted into elements.
For example, if we implement ProjectionPart as an element (Projection Element), we could remove ProjectionPart, and redefine the Projection Widget using the ElementWrapperPart<ProjectionElement>. Same for ProjectionPage.

This way, at the heart of each widget would be an element. The current set of widgets would then be available as elements, and optionally as widgets, without duplicating code.

Thoughts?
Oct 20, 2014 at 2:31 AM
Hi,

You want to implement a deployment of navigation?

Thanks
Oct 21, 2014 at 10:12 PM
Is there an option to disable the generation of default classes in the grid? I'd prefer to not get classes with quite common names like "table", "row" added by default.
Developer
Oct 21, 2014 at 10:26 PM
Edited Oct 21, 2014 at 10:31 PM
IntranetFactory wrote:
Is there an option to disable the generation of default classes in the grid? I'd prefer to not get classes with quite common names like "table", "row" added by default.
Absolutely, just override the following 3 templates:
  • Element-Layout-Grid.cshtml
  • Element-Layout-Row.cshtml
  • Element-Layout-Column.cshtml
Overriding these enables you to turn the grid into a 100% Bootstrap grid.
Developer
Oct 21, 2014 at 11:23 PM
Vite wrote:
You want to implement a deployment of navigation?
We discussed implementing a Menu Element to act as the Menu Widget's counterpart, but decided that this could be done later, as menus are typically added as widgets inside of zones outside of the Content zone.
If you have a compelling use case however, I'd recommend creating an issue for it here on CodePlex.
Oct 22, 2014 at 1:28 AM
Edited Oct 22, 2014 at 2:00 AM
At this point, "Grid" is placed in the content zone. I thought it would be great if you could structure the "Grid" at the zone level. For example, if you use the same "Grid", but with the ability to override the properties of the tag. It's the same as if you added universal "Grid" in Layout.cshtml, and renamed, for example, the class "table" in the "layout-navigation". Thus, this method would allow to create a "Layout.cshtml" directly through the user interface and integrate the template contents module Orchard.Widgets, defining "@Zone(Model.Table)" for each "Grid".
This is a rough example:
<div id="layout-@Model.Table" class="group">
    <div class="row">
        <div class="span-12 cell"></div>
    </div>
    @Zone(Model.Table)
</div>
Thanks
Developer
Oct 22, 2014 at 2:17 AM
You could implement the above right now by creating a custom element driver for the Column element, exposing a ZoneName property for example.
Then, any column that has a ZoneName value would render a zone with that name.
However, you wouldn't be able to add widgets to these zones since only the zones listed in the theme manifest are shown in the Widgets screen.
We will revisit all this later.
Oct 22, 2014 at 2:54 PM
Hi, this is my first post and I haven't got much experience with Orchard yet so bear with me. :)

I have tried out the new layout feature and it is a really great tool, i just have one problem and that is that apparently while I can add classes and id's to most elements, the "Grid" element doesn't seem to have such an option.

I was hoping this could allow me to assign a class to a div that's kinda like a wrapper around multiple columns...

Thanks in advance!
Oct 23, 2014 at 5:51 PM
Hi !

I think what I'm gonna say it's not a bug but might be a feature :) I explain...

I changed some of my templates to register scripts and css. Like that I hoped I could get things nice, like adding carousel content item to my layout and be able to see the result. This is working very well... after I save things. But style and scripts only get applied when I save, I guess because it's reloading the iframe, and things gets right.

The question is : is there any way to include on the fly styles and scripts ? would it be something wrong to get the iframe refreshed when a content item get added ?

I agree that the nicest thing to have would be to have the possibility to include styles and scripts, or bundles, directly from the user interface, but this wouldn't "really" change the problem, we would have to refresh the iframe the same way, isn't it ?

Have a nice day !
Oct 24, 2014 at 8:27 PM
Edited Oct 27, 2014 at 4:53 PM
image element is not showing in canvas .
related issue :https://orchard.codeplex.com/workitem/21030
same for element blueprints. they are not displayed after selecting them from the toolbox.
Developer
Oct 30, 2014 at 9:20 PM
HenryAmm wrote:
I have tried out the new layout feature and it is a really great tool, i just have one problem and that is that apparently while I can add classes and id's to most elements, the "Grid" element doesn't seem to have such an option.
Done.
Developer
Oct 30, 2014 at 9:24 PM
Miuu wrote:
I changed some of my templates to register scripts and css. Like that I hoped I could get things nice, like adding carousel content item to my layout and be able to see the result. This is working very well... after I save things. But style and scripts only get applied when I save, I guess because it's reloading the iframe, and things gets right.

The question is : is there any way to include on the fly styles and scripts ? would it be something wrong to get the iframe refreshed when a content item get added ?

I agree that the nicest thing to have would be to have the possibility to include styles and scripts, or bundles, directly from the user interface, but this wouldn't "really" change the problem, we would have to refresh the iframe the same way, isn't it ?
I am not sure that I follow. Where and how exactly are you adding styles and scripts?
Is the goal to control the looks of the layout in design mode?
Oct 31, 2014 at 2:30 PM
Yes this is the goal.

Like, have a ContentType Slider with his own Shape. Within the Shape, i included some javascript and css with Scripts.Register() and so on. When i add it to a layout, i need to save the Layout if i want the Scripts.Register to run and include my scripts and styles.

Could we refresh the layout iframe to get the scripts and styles registered ? Is there any other way to do it ?
Developer
Nov 1, 2014 at 3:55 AM
Edited Nov 1, 2014 at 3:55 AM
I see. Well, the reason this doesn't work when you first add an element is because it is loaded via AJAX, so any call to the ResourceManager (such as Script.Include()) will have no effect on the HTML being returned. You could circumvent this by either not going through the ResourceManager (and including <script> and <style> elements straight in your templates), or render the Layout.Head zone in your templates (theoretically achieving the same effect as the former suggestion).
Most browsers will parse these <script> and <style> elements and apply them as the HTML result is injected into the DOM.

I will not consider refreshing the iframe upon adding an element to the canvas until there are at least three good reasons to do so. :)
Nov 1, 2014 at 1:51 PM
sfmskywalker wrote:
HenryAmm wrote:
I have tried out the new layout feature and it is a really great tool, i just have one problem and that is that apparently while I can add classes and id's to most elements, the "Grid" element doesn't seem to have such an option.
Done.
That is awesome, thanks! Can't wait for the update to go through. The layout manager definitely was one of the best additions in recent times!
Nov 3, 2014 at 10:19 AM
sfmskywalker wrote:
I will not consider refreshing the iframe upon adding an element to the canvas until there are at least three good reasons to do so. :)
I'm sure it's good reasons, i think i can guess some of them :)

I will give a try to the Layout.Head method and will give you feedbacks.

Thanks !
Nov 11, 2014 at 7:52 PM
Sipke,

First of all thank you for creating the layout manager as it is exactly like what we were trying to create only your layout manager is so much better and powerful!

Here are a few thoughts and issues we have come up with while working with Layouts

sfmskywalker wrote:
Content Item
The question that was raised today was: in addition to being able to select content items, should the user be able to create new content on the fly as well?
Having the ability to create new content items on the fly would be awesome! The work flow would make way more sense to our users who get confused that you need to create items, then go to the page you want them on and add them.

There is also an issue which I am guessing you are aware of, where if you click on the title of a content item after adding it via the content picker it takes you to a view in the modal that has another menu and another set of save / publish buttons. It would be awesome if you could update the content item while still in the modal though.

Another thing we noticed was with the TagBuilderExtensions.AddCommonElementAttributes. We were overriding the Element-Layout-Grid view so that if we detect a certain setting that we force another setting. The issue is that if you change the model and then pass that model to AddCommonElementAttributes, GetCommonElementAttributes gets the settings again and does not use the settings in the model that was passed to it. This is probably by design, but it was a little confusing at first that we were passing our model to it but it was completely ignoring our model change. There are obviously plenty of ways to work around this and changing the model like that in the view is bad anyways, I just thought I would bring this up in case this was not intended.

Finally, I have a question. Is there any way to add another Element that uses the contentpicker that can filter on a specific contentType? Since the content picker does not have any settings like a typical content picker field, I do not see a way without customizing the contentpicker field. Any ideas?
Nov 13, 2014 at 3:36 PM
Just a thought.
It would be useful if we had in the settings tab for each element an extra text field to add additional html attributes.
Just like there is a text field for Id , class and inline style.
Useful for adding annotations to html elements that can be used by javascript code.
Developer
Nov 14, 2014 at 7:35 AM
Hi PacmanDave,

Thanks a lot for the feedback and suggestions.

You're the second person that thinks creating content items on the fly would be useful, so it might just happen one day. ;)
I have a question about this though: what is the use case of using a content item element over using an HTML element?
The reason I'm asking is that the purpose of the Content Item element is to allow you to pick and place existing content items that you want to render in other places as well. In your scenario, when you would create a content item on the fly, do you actually want this content item to appear in the Content list screen?

Yeah, we're aware of this issue. We will revisit this by updating the content picker UI in this screen and providing an optimized content editor experience for this scenario.

Correct, what you describe about the Add/GetCommonElementAttributes is by design, but if you show me a snippet of the usage you would like to see, we can probably change it so it works as you expected it. I am guessing you added some attributes to the shape, and expected these to be added?

Unfortunately there is currently no way to configure existing elements. What we want to do is allow Blueprint Elements to have settings, so you could for example create a blueprint named Product, which would derive from ContentItem, with a configuration such that it restricts the picker to allow only Product content types. Currently you will have to create your own custom element, possibly copying the implementation of the ContentItem element, renaming it, and updating the editor view to add the content type restriction.
Developer
Nov 14, 2014 at 7:37 AM
Edited Nov 14, 2014 at 7:37 AM
Hi giannik.

I don't see any problems with this. Would you mind opening an issue for this so we can discuss with the others during triage?
Nov 14, 2014 at 10:27 AM
Edited Nov 14, 2014 at 10:31 AM
sfmskywalker wrote:
You're the second person that thinks creating content items on the fly would be useful, so it might just happen one day. ;)
I have a question about this though: what is the use case of using a content item element over using an HTML element?
The reason I'm asking is that the purpose of the Content Item element is to allow you to pick and place existing content items that you want to render in other places as > well. In your scenario, when you would create a content item on the fly, do you actually want this content item to appear in the Content list screen?
I guess i'm this person :) And yes, i would like to see the ContentItem in the Content list screen.
The main purpose of this feature for me, is to offer to the user an ease of use. Since he would need to add the content, then go back to the layout and so on, it's a lot of actions for a end user.
I tried already to implement what i called a "ContentType Element", but i could not really have it like i wanted. My idea was to based a Element on a ContentType and then on the layout page be able to have an editor of my ContentType.

Also, localy, i merged the Deployment branch into 1.x to try import/export some Layout. Bertrand did a great work on this module ! But i think the layout module is missing some extensibility for import/export scenarios.
When you export a ContentItem element, we would need to replace the id of the ContentItem by the Identity, like bertrand did.
I also tried to implement this within the layout module, adding export/import methods to the element driver and call those methods when exporting a layout. At least i was wonderning if there was not a another way to do it.
Nov 14, 2014 at 11:08 AM
sfmskywalker wrote:
Hi giannik.

I don't see any problems with this. Would you mind opening an issue for this so we can discuss with the others during triage?
here it is: https://orchard.codeplex.com/workitem/21070
Nov 14, 2014 at 4:22 PM
sfmskywalker wrote:
You're the second person that thinks creating content items on the fly would be useful, so it might just happen one day. ;)
I have a question about this though: what is the use case of using a content item element over using an HTML element?
The reason I'm asking is that the purpose of the Content Item element is to allow you to pick and place existing content items that you want to render in other places as well. In your scenario, when you would create a content item on the fly, do you actually want this content item to appear in the Content list screen?
One of our scenarios is that we have a content type of Service. Service has various fields for content to show on different display types such as if it is in a "Spotlight" or "Slider" display type. These fields could be anything from a media picker to a text field. Service also has a Layout part on it with a template for when you are on the detail view of it. All of this helps us keep our users from going crazy in a HTML WYSIWYG and making things look awful as they can only fill out predefined fields and we have views that handle how they are displayed.

As an example (maybe not the best example....), on our homepage we want to "Spotlight" a service, so we create a grid in our layout and in one of the columns we add a Content Item element and select our service and set it's display type to "Spotlight" ( We actually created another element called spotlight that is like content item, but forces a specific display type (and other things) so the user doesn't need to know them, and will soon filter to only content types that have spotlight content. We may end up just making this a blueprint but you get the idea). This is where it would be handy if they could just quickly create a new one if they are trying to add a Service that does not already exist as it saves them from a bunch of clicks. It is more of an efficiency thing.

sfmskywalker wrote:
Correct, what you describe about the Add/GetCommonElementAttributes is by design, but if you show me a snippet of the usage you would like to see, we can probably change it so it works as you expected it. I am guessing you added some attributes to the shape, and expected these to be added?
Don't worry about this, we realized the mistake in what we were doing and moved on
Developer
Nov 15, 2014 at 4:07 AM
Edited Nov 21, 2014 at 8:10 PM
Thanks guys for elaborating on the use case for ContentItem elements. That helps.

@Miuu - Yes, you were the other person I was referring to. :)
Regarding import/export, you'll be happy to hear that this feature was added yesterday.
Nov 16, 2014 at 11:32 PM
Hi, I know it's all still in pre-release, and it looks fantastic. Are there any theme's that support it released or in pre-release that you know of? This feature is exactly what I need to get around some issues I've got, and I'm trying to get a headstart on making the conversion :) If there are no themes, is there any doc that would explain how to make a theme "Layouts" aware?

Thanks for all the hard work as always.
Developer
Nov 17, 2014 at 12:03 AM
There are no themes that currently support it as far as I am aware. However, we are currently writing some blog posts that explain the new Layouts feature, including how to have a theme take full advantage of it. You'll see them come online over the course of next week and the week after.
Nov 17, 2014 at 9:24 AM
sfmskywalker wrote:
Regarding import/export, you'll be happy to hear that this feature was added yesterday.
This is awesome ! Thank you !
Nov 17, 2014 at 5:29 PM
Will layout content be search index-able?
Developer
Nov 17, 2014 at 8:15 PM
Yes, layout content is being indexed.
Nov 17, 2014 at 9:11 PM
@sfmskywalker, Special thanks to you for this nice feature. I'm going to do some tests on that, specially about any issues in right to left direction and localization capabilities.
Also are there some documents, blog posts, ... to guide developers for implementing this feature in theme?
Developer
Nov 20, 2014 at 7:25 AM
Edited Nov 20, 2014 at 7:29 AM
Thanks for testing!
Yes, I have a blog post waiting, but I haven't published it yet as Daniel Stolt is currently revising the layout editor UI. As soon as that's done and integrated, I will update my post and publish it.
Until then, I am happy to answer any questions you may have.
The feature was built in such a way that you can use it with any theme you want (thanks to the inclusion of the 'custom-grid.css' file, which implements a 'light-weight' grid system.

The blog post includes a small section on what to do to have the layout be rendered as a Bootstrap grid, which I shall paste here:

Bootstrap

Our of the box, Orchard uses a small CSS file called custom-grid.css, borrowed from Sébastien Ros. This is like Bootstrap extra light, perfect for simply rendering a grid.

However if your theme is using Bootstrap, you most certainly will want to have the LayoutPart render the grid, rows and columns using Bootstrap specific classes.

Fortunately, this is very simple. Just follow the following steps:
  1. Copy the following files from Orchard.Layouts/Views into the Views folder of your theme: Element-Layout-Grid.cshtml, Element-Layout-Column.cshtml, Parts.Layout.cshtml.
  2. Open the copied Element-Layout-Grid.cshtml file and change the used CSS class name from "table" to the Bootstrap equivalent of container".
  3. Open the copied Element-Layout-Column.cshtml file and change the used CSS class name from "span-" to the Bootstrap equivalent of "col-sm-" for example (use the appropriate viewport size as you see fit). Also change the "offset-" class to "col-sm-offset-", or some other viewport size you prefer. You might also want to get rid of the "cell" CSS class entirely.
  4. Get rid of the "custom-grid.css" reference from Parts.Layout.cshtml.
This is how these files look like after said changes:

Views/Element-Layout-Grid.cshtml
@using Orchard.DisplayManagement.Shapes
@using Orchard.Layouts.Helpers
@{
    var tagBuilder = TagBuilderExtensions.AddCommonElementAttributes(new OrchardTagBuilder("div"), Model);
    tagBuilder.AddCssClass("container");
}
@tagBuilder.StartElement
@DisplayChildren(Model)
@tagBuilder.EndElement
Views/Element-Layout-Column.cshtml
@using Orchard.DisplayManagement.Shapes
@using Orchard.Layouts.Helpers
@{
    var columnSpan = (string)Model.ColumnSpan ?? "12";
    var columnOffset = ((string)Model.ColumnOffset).ToInt32() ?? 0;
    var columnOffsetCss = columnOffset > 0 ? "col-sm-offset-" + columnOffset : default(string);
    var tagBuilder = TagBuilderExtensions.AddCommonElementAttributes(new OrchardTagBuilder("div"), Model);
    
    tagBuilder.AddCssClass(String.Concat("col-sm-", columnSpan));
    tagBuilder.AddCssClass(columnOffsetCss);
}
@tagBuilder.StartElement
@DisplayChildren(Model)
@tagBuilder.EndElement
Views/Parts.Layout.cshtml
@Display(Model.LayoutRoot)
Instead of overriding the shape templates, you could consider simply retargeting the "span", "offset" and "table" classes using Bootstrap mixins. Either way is fine and completely up to you.

And that is all there is to it when using Layouts with a Bootstrap theme.
Nov 20, 2014 at 12:41 PM
Thank you. It seems very nice design and architecture. I think this comment is sufficient to start using this feature.
Nov 21, 2014 at 3:16 PM
Honestly, I think we cannot explore all power of Orchard.Layouts if we cannot place widgets in columns of a layout. Really, what is usage of Grid, row, column, etc when we cannot place a widget inside it?
One of the most important part of design of a website is widgets. And biggest limitation for layout of an Orchard site is fixed zones in theme layout files.
If we can place widgets in columns, This can be a workaround for this limitation.

@sfmskywalker, is any way to create an element that works similar a widget? for example an element for latest blog posts or , ....?
Also have you an idea to simulate short-code feature of Wordpress CMS? in Wordpress you can place a widget anywhere by a short-code similar to [widget_name id=1].

Thank you for creating this feature.
Nov 21, 2014 at 3:24 PM
mehranrezaei wrote:
Honestly, I think we cannot explore all power of Orchard.Layouts if we cannot place widgets in columns of a layout. Really, what is usage of Grid, row, column, etc when we cannot place a widget inside it?
I must agree with mehranrezaei! It's a great feature so far but it could definitely benefit from widgets. :)
Nov 21, 2014 at 3:40 PM
@HenryAmm, Thank you, I agree with you. Orchard.Layouts is very very very nice feature currently but it can be better. (Thanks to @sfmskywalker)
But a large number of my clients ask me to change zones orders or creating new zones, etc. In developing of an Orchard theme we have fixed zones in theme definition and Layout.cshtml. I hope Orchard.Layout can solve this big limitation.
Developer
Nov 21, 2014 at 7:55 PM
I feel you, but we decided to remove the Widget element harvester for a few good reasons. The primary reason is that widgets are a different kind of animal, having their own lifetime and supporting infrastructure. It worked, but the implementation got kind of messy and hackish. It was a direction which we didn't like. What we are experimenting with instead is moving towards an element first approach, where we implement elements first, en turn them into widgets using the ElementWrapperPart. This means that you would for example have a BlogArchive element, and optionally a widget with an ElementWrapperPart configured to use the BlogArchive element. The element essentially acts as the nucleus of the widget. This enables a single code base for elements which can be easily used as widgets. We currently did this for the Content Item element and a few others.

If you don't wait for more elements to become available, you could start writing them today. We did this for ProjectionPart by creating a Projection element and driver, which is almost an exact copy of the ProjectionPartDriver.

Regarding short-codes, that is being investigated.

Hope this clarifies the matter.
Nov 21, 2014 at 8:47 PM
Thank you for quick reply. I'm looking for a way that we are not limited to fixed zones. I think the end-users must be able to change whole layout of site not only inside the fixed zone. It seems Orchard.Layouts is good candidate to do this job. I must dive in code of this module to understand what is an element really.
Developer
Nov 21, 2014 at 10:47 PM
Yes, I think Layouts will serve you well to achieve that.
Let me know if you have any questions about Elements.
Nov 24, 2014 at 9:48 AM
Really, I don't know what is an element. For example can i create an element to render any featured content such as slider?
I can create a widget to select one of sliders from drop down list and render it in Display method of widget's driver. But i cannot place this widget in columns created by Orchard.Layouts currently. Is element correct way to replacing widget in this scenario? If no, what is correct way? If yes, Please help me to understand how can i do that.
I don't expect you to provide the code, but a little advice or pointing me in the right direction would be great! Thanks a lot.
Nov 25, 2014 at 5:57 PM
Sipke,

Just wanted to say that we just tested the new indexing method and it is working great for us! No more doing custom indexing for our custom elements! Thank you!
Nov 25, 2014 at 10:34 PM
Edited Nov 25, 2014 at 10:38 PM
In today's call, I lost my connection and could not complete my question/inquiry.

This looks very promising but I have to wonder if placing adding this functionality in a dot build is good idea. The reason I'm concerned is that if an application introduces a substantially different design surface, then it becomes much harder to manage from nearly every aspect - developers, users, administrators. I've seen this happen too many times in the past and believe Orchard is about to walk into something that may cause more problems than is expected.

For example, I asked 2 clients this morning to look at the upcoming feature and give me feed back on two items: ease of use and long-term manageability. To be fair, I told them there's a new layout mechanism and then gave them a clean site with this morning's build. Both of these clients use their sites to market their products/services. They have experienced content authors and I figured they would provide a good sounding board as they have used Orchard for more than a year.

Their response to both questions was less than enthusiastic - here's a summary.
  • Both found creating a page was no longer a simple thing. There are too many hoops to create a page and add content. They both stated that the thing they really like about Orchard was the ease of creating a page and now that ease has been taken away.
  • They were confused by the concept of zones and layouts and how well they would work moving forward with regard to maintaining a long-running site. One question asked was "why even have zones now? should we just create a theme with a single zone?"
Then I asked a final question - would you like this feature added in a dot build? Both said no. This was too big of a jump in functionality for an incremental build. One client said this would be an upgrade show stopper for them b/c they can't afford the extra time to teach their user base yet another way to build pages. He said he would expect a paradigm shift in vNext but not a smaller dot build.

I would have to agree with them that a paradigm shift such as this is too big for a dot build. This is my major concern and something that I hope the team looks at very carefully before releasing 1.9 with this feature added. My opinion is that you need to let this bake for a little while. Give the bugs some time to resolve themselves (we know there will always be folks using beta builds) and get the usability sorted out (like the demo this morning that showed improved ui), then push this out in version 2.0.

My two cents...
-Maurice
Nov 26, 2014 at 12:37 AM
Edited Nov 26, 2014 at 12:41 AM
MauricePrather wrote:
I would have to agree with them that a paradigm shift such as this is too big for a dot build. This is my major concern and something that I hope the team looks at very carefully before releasing 1.9 with this feature added. My opinion is that you need to let this bake for a little while. Give the bugs some time to resolve themselves (we know there will always be folks using beta builds) and get the usability sorted out (like the demo this morning that showed improved ui), then push this out in version 2.0.
I was not in today's call so maybe I missed something, but you could just not enable / disable the Layouts module and continue with what is currently available. This is what is so great about the way Orchard works.

For us, Layouts is pretty much a must for our current design, so we will use it, but I understand that it may not be for everyone. Our users were actually very very excited about the change when we showed them, but then again they are learning Orchard from scratch anyway as we are moving off of Drupal.
Developer
Nov 26, 2014 at 2:31 AM
Edited Nov 26, 2014 at 2:34 AM
Hi Maurice,

Thanks for taking the time to provide feedback, that is highly appreciated.
Layouts is a new feature, not a replacement of existing features. When you take Orchard 1.9, it will still have everything you had with 1.8.
As PacmanDave pointed out, you can simply disable the feature. It is enabled by default for new installations, but it won't be enabled when you upgrade existing installations. You are by no means forced to use any of it when upgrading or when setting up a new site for that matter.
This is indeed one of many nice things about Orchard - some users will want to use it and enable it while others won't, and they will find no difficulty whatsoever without this feature enabled.

As for the question: "why even have zones now? should we create a theme with a single zone?", that is a very good question. It is a question I asked myself as well. My answer is: it depends. If you want to control the layout of the entire site, then having a single content zone might make sense and it would work nicely. Just keep in mind that layouts is intended to provide a layout within a zone into which the content item shape is placed. LayoutPart, like any other content part, simply has its shapes added according to Placement.info rules. That shape itself renders its elements as per the layout. This means that you can use it to layout various zones of your site as you see fit.

I agree that if you do use Layouts and replace the BodyPart with a LayoutPart, it is less straightforward to edit content when compared to just using BodyPart. We are working on improving that, but we don't feel that we should wait with releasing this as part of it (because, again, you can turn off the feature if it bothers you, while others can take advantage of it as they see fit).

Hope this clarifies things a bit, but do let me know about any further questions and concerns.
Nov 26, 2014 at 7:38 AM
+1 on sipke's comments.
This is one of the best end-user oriented features added to orchard.
But I guess your users are comfortable with the old way of doing things. That is fine.
Having global zones is a good thing , as it allows you to control what level of freedom to give users to customize content.
Then again for total freedom use a single zone with a master layout template to reuse common elements.
I think your users will appreciate this once they get used to it.






.
Nov 29, 2014 at 1:20 PM
@sfmskywalker, What will happen when there is no content item and we want render a simple view or custom shape?
Dec 1, 2014 at 5:40 PM
I'm certainly feeling I'm barking up the wrong tree by now... so I promise this is my last comment on this thread.

If the claim is that Orchard can enable/disable at will and that's the power, then I suggest you follow your own advice and leave it OFF by default. The beauty of this product has always been the claim of simplicity. If you want to keep your new, just-found-Orchard-because-we-read-something-about-it, users engaged... give them the dead easy way to create content as their first experience. Then certainly figure out how to add a message to the admin UI that says "hey, want to try advanced layouts to give your site even more snazziness? Try the layouts module".

I've shipped several large products and gone through many conversations around things like this... if you give your inexperienced users too high of a hurdle to get in and do something simple, you're going to lose users.

Think about this way... do you force all pages to go through an approval process just because you have new workflow engine and the various actions are cool? Of course not, you leave that advanced functionality to your users to setup for themselves.

For my test users - although I fully understand what a migration versus an upgrade means, their "upgrade" is not running through the upgrade process but rather starting with a new build then migrating page content to the new build. They have done this process for 2 Orchard versions b/c they have discovered they are much more efficient at the process of creating new content than in dealing with upgrade bugs in Orchard, bugs in modules to work, etc.
Dec 4, 2014 at 3:05 PM
Great work @sfmskywalker. I think this will be really useful :)

I tried the bootstrap tweaks you mentioned, I think you may have to use the container-fluid class to get the 100% width, otherwise nested grid layouts fail.
Dec 5, 2014 at 9:40 AM
Actually I don't think you will need the container class at all, as the container will be created as part of the outer zone. Adding extra containers causes excess padding.
Developer
Dec 5, 2014 at 10:02 AM
Edited Dec 5, 2014 at 10:02 AM
Where is the best video demo of the Layout module?
Developer
Dec 6, 2014 at 4:58 PM
The following is a sneak preview just for you - it's the accompanying screencast of a yet to be published blog post. It is not specific to Layouts per se, but it does show how to use it together with Dynamic Forms and WorkFlows.

https://www.youtube.com/watch?v=TUVj6eyGOUM

Abhishek is working on a video tutorial dedicated to Layouts.
Developer
Dec 6, 2014 at 5:16 PM
Nice video.

Have you seen Umbraco 7.2?
http://umbraco.com/follow-us/blog-archive/2014/12/4/umbraco-72-released
Their 'grid layout' seems really straightforward.
Developer
Dec 6, 2014 at 5:22 PM
Can I ask you if you think to create some kind of recipes for each activity?
ex : Registration = form + binding + user activity + mail template
Dec 7, 2014 at 4:00 AM
I didn't try yet to play with elements, but some questions, are they stored as infoset parts ?
If so, if we use elements in place of widgets, would it be faster than before ?

Without be part of Layouts, it would be great to use the same technic and consider menu items as elements of a menu
I use others less good solutions to have only one content item which serves my menus, but it improves so much the response time

Thanks
Dec 7, 2014 at 2:55 PM
@sfmskywalker, Is there an element to hold a widget and render it in column of layout currently?
Also are all string in Layout module localizable? For example element names, element category, etc?
Jan 12, 2015 at 8:10 AM
I tested 1.x branch today. I did fresh install and get the following error (See the screenshot)
The RouteData must contain an item named 'controller' with a non-empty string value.
Image
Developer
Jan 12, 2015 at 11:10 AM
Edited Jan 12, 2015 at 11:10 AM
@mehranrezaei
There is a ContentItem element that you can point to a content item to render, but there's no such element that lets you render a widget. We had support for this in the early stages, but decided to remove it since the world of widgets is different from the world of elements. The other way around is a supported scenario however: you could have an element, and have it rendered as a widget.

Regarding localization, element names and categories are localizable the same way content type names, part names and descriptions are localizable - they aren't. We did briefly talk about this a while back, and I do have an idea on this, but it will be for later.

@armanforghani
I noticed it too, and it happened right after the owin feature branch was merged in.
The new and improved layout editor doesn't use an iframe, so this particular problem will disappear soon.
However, the fact that this happens does seem to indicate a bug might have been introduced with the owin branch.

@Zoltan, thoughts?
Jan 12, 2015 at 4:17 PM
Edited Jan 12, 2015 at 4:18 PM
@Sipke,

This issue is due to this update: Merge branch 'feature/owin' into 1.x, this because of the new HttpAsyncHandler implementation. For more details and to see the workaround I proposed, see my answer on http://www.orchardpros.net/tickets/4737

Note: Maybe there is other side effects in other contexts where the same kind of workaround need to be done

Regards
Developer
Jan 12, 2015 at 4:35 PM
Edited Feb 17, 2015 at 5:07 PM
Thanks jtkech! That's really helpful.
Developer
Jan 12, 2015 at 5:24 PM
Good observations and nice bugreport by jtkech. Fixed it.
Jan 30, 2015 at 8:09 AM
Edited Jan 30, 2015 at 8:10 AM
j3ffb wrote:
Actually I don't think you will need the container class at all, as the container will be created as part of the outer zone. Adding extra containers causes excess padding.
Exactly, you don't need it if your theme is already using bootstrap!
Feb 17, 2015 at 4:05 PM
Edited Feb 17, 2015 at 4:08 PM
When layout using as template that new elements can be added only to special zones (grid, row, column). This zones usually have a limited width. But i would like to add new element as full screen width element. Can i do this?
Feb 17, 2015 at 4:37 PM
Edited Feb 17, 2015 at 4:39 PM
For displaying Widgets can be used Shape Elements (as temporary solution, i use it for side menu):
  1. Create special Zone in Site Theme or use existing Zone. Add some Widget to this Zone (e.g. Navigation Widget).
  2. Create Shape Element that displays the zone.
@Display(Layout.AsideSecond) @*display zone*@
@{
    Layout.AsideSecond = null; // clear zone
}
Developer
Feb 17, 2015 at 5:09 PM
neTp9c wrote:
When layout using as template that new elements can be added only to special zones (grid, row, column). This zones usually have a limited width. But i would like to add new element as full screen width element. Can i do this?
You would do that by setting up your theme in such a way that everything uses full width by default, and that containers have a fixed with. This way, whatever you add to the Layout editor canvas will take up the full width except for Grid elements.
Feb 17, 2015 at 5:20 PM
Edited Feb 17, 2015 at 7:03 PM
sfmskywalker wrote:
You would do that by setting up your theme in such a way that everything uses full width by default, and that containers have a fixed with. This way, whatever you add to the Layout editor canvas will take up the full width except for Grid elements.
I would like to create MyTemplateLayout with some elements and some container-elements (grid, column, row). And use MyTemplateLayout as template for MyUsualLayout. And in MyUsualLayout i would like to add elements that have full width. Can i do this?

I want to say that i need container-element with a full screen width (full content zone width) , which could be filled in child layout. Or ability to use canvas element as such container in child layout.
Feb 17, 2015 at 7:01 PM
Edited Feb 17, 2015 at 7:03 PM
sfmskywalker
I hope one day you will write a series of posts about creating this module :)
Thank you for what you are doing!
Feb 18, 2015 at 9:40 PM
giannik wrote:
Just a thought.
It would be useful if we had in the settings tab for each element an extra text field to add additional html attributes.
Just like there is a text field for Id , class and inline style.
Useful for adding annotations to html elements that can be used by javascript code.
I tried out the new layouts today from the layout feature branch hoping that this feature might be there, and unfortunately discovered that it is not. It would be nice when you click on edit properties that there is a textfield that allows you to add any attributes you need. For instance, on a current project I am working on we are doing a multi page form using a custom element that extends the form element from dynamic forms with angular. This multi page form also shows and hides certain fields based on values selected from other fields. It would be nice if I could just add data-ng-model attributes on fields and then do data-ng-hide attributes on fields that need to show/hide.

I have looked into adding this myself without affecting any core code via a module, but it looks like that might not be possible (at least not without overriding a bunch of core layouts/dynamicforms functionality).
Developer
Feb 18, 2015 at 11:20 PM
@neTp9c - Not sure I get exactly what you're saying, but when you use a template for a layout, you won't be able to interleave other elements - the template dictates the layout, and all you can do next is add elements to container elements. In the next release, you'll be able to add more Canvas elements to Grid element. Right now you'll have to add a nested Grid, Row and Column to enable containers in Templates that can hold other elements.

You'll be happy to hear that I already have a blog post series regarding Layouts & Dynamic Forms on my list of things to write about. :) The first introductory post is already done and is about Dynamic Forms. To be published at the same time as the 1.9 release.

@PacmanDave - Interesting. Would you mind creating a feature request for this (by creating an issue) so we can gauge other's people's interest? In the meantime, you could implement element handlers and element drivers in your own module that add an additional tab to the editor dialog of elements (this could be a common element driver that adds this tab for any element type), and then override the element shapes that need to consume these settings.
Feb 18, 2015 at 11:50 PM
Regarding localization, element names and categories are localizable the same way content type names, part names and descriptions are localizable - they aren't. We did briefly talk about this a while back, and I do have an idea on this, but it will be for later.
@sfmskywalker, Please be aware that end users may not work with content types, parts, ... but they must work with Layout feature everyday. Localization and RTL support is very important for such feature.

Thank you so much for this great feature.
Feb 19, 2015 at 10:45 AM
sfmskywalker wrote:
the template dictates the layout, and all you can do next is add elements to container elements.
All currently available container elements have a limited width.
Example:
  1. When i don't use a template for a layout that i can add Paragraph Element that have a full width.
  2. When i use a template for layout that i can't add Paragraph Element that have a full width. (i can add Paragraph Element only inside grid that have a limited width).
Feb 19, 2015 at 1:27 PM
sfmskywalker wrote:
Interesting. Would you mind creating a feature request for this (by creating an issue) so we can gauge other's people's interest? In the meantime, you could implement element handlers and element drivers in your own module that add an additional tab to the editor dialog of elements (this could be a common element driver that adds this tab for any element type), and then override the element shapes that need to consume these settings.
A feature request has been created https://orchard.codeplex.com/workitem/21209

I will look into doing this with a module a little bit more for now.
Feb 21, 2015 at 12:19 PM
Edited Feb 21, 2015 at 12:21 PM
In the latest update is it not possible to drag and drop elements from one column to another?
I cannot seem to drag a html element from one row element to a different column in another row element.
I remember this was doable in previous versions.
Maybe easy for end users if there was a drag handle icon in the toolbar per element.
thanks.
Developer
Feb 22, 2015 at 8:48 AM
That is a known current limitation. Until that is resolved, you can use the CTRL+X and CTRL+V keys to cut & paste an element to another container.
Feb 23, 2015 at 1:18 AM
I wasn't planning on using the layouts module at all with 1.9 but I have to say, it is very neat Sipke! I'm definitely going to change some of my plans now. If you've already got an article done for the new functionality, we'd all love to get ahold of it now if you're willing. My thanks to the whole team.
Feb 23, 2015 at 4:47 PM
After playing with the new version of layouts and converting our custom elements to the new layouts here are a few issues / concerns I have run into.
  1. When changing properties of an element you cannot hit spacebar or the dropdown goes away. This makes it so you cannot have multiple classes on an element. (Tested in latest Chrome)
  2. When changing properties you cannot paste in any of the 3 fields (Tested in latest Chrome).
  3. With the layout category in toolbox being hardcoded you cannot add custom elements to the layout category without overriding the view and toolbox directive. This is not a huge deal as it will just create another layout category automatically, but it was a feature that was working in the older layouts.
Would you be interested in me writing a tutorial on how to create a custom container element since it is a bit more difficult now? I was thinking of doing a tutorial on how to create a Section element (uses the HTML5 section tag) that you can set a full width background image on.
Developer
Feb 23, 2015 at 4:55 PM
TinkeringTurtle wrote:
I wasn't planning on using the layouts module at all with 1.9 but I have to say, it is very neat Sipke! I'm definitely going to change some of my plans now. If you've already got an article done for the new functionality, we'd all love to get ahold of it now if you're willing. My thanks to the whole team.
Thanks! I actually have two articles on the shelve right now, one about Layouts and one about Dynamic Forms and Workflows. I just published to serve as a preview - I need to update some technical aspects as well as visuals:
Developer
Feb 23, 2015 at 4:59 PM
@PacmanDave:
  1. We're aware of the issue and have it on our fixlist.
  2. Same as 1.
  3. You're correct, this has been hardcoded. I'll discuss to see if we want to revisit this for Layouts.
Yeah it would be absolutely great if you could write an article on creating a custom container element such as a Section. Perhaps you're already aware of it, but the Form element from the DynamicForms module is such a custom container.

Thanks
Feb 23, 2015 at 10:04 PM
sfmskywalker wrote:
Thanks! I actually have two articles on the shelve right now, one about Layouts and one about Dynamic Forms and Workflows. I just published to serve as a preview - I need to update some technical aspects as well as visuals:
Great stuff! Thanks.
Feb 24, 2015 at 10:07 AM
Bootstrap (and other fraemwork or theme) used several different classes for different appearance of text (e.g. lead or well).

it would be useful to be able to create new element from the dashbord and configure it only with html attribute.
Example:
  1. Create new Paragraph element with name Lead
  2. Configure it with class="lead" attribute
  3. Leave content of this element empty
  4. Add this element in Layout and fill it with text
Developer
Feb 24, 2015 at 10:20 AM
Yeah I agree, it would be good to be able to create custom elements based on existing ones, and then only provide certain values when adding that element to the design surface.
Mar 4, 2015 at 7:50 PM
Edited Mar 4, 2015 at 7:51 PM
I am liking this module more and more every day, Sipke! (Especially with your recent fix of the "Are you sure you want to leave this page" dialog - thanks!)

One question - it's currently not possible to nest rows (and hence, columns) inside other columns. Is this something you are thinking of implementing, or would it be too much of a challenge?
I know it's OK from Bootstrap's point of view; it would be nice if we could take advantage of that feature in Orchard.Layouts.
Developer
Mar 4, 2015 at 11:09 PM
Kaveman,
Yes this is definitely supported - you just have to add a grid element in between. I.e. add a grid to your column, then add a nested row to that grid, and then you can add columns to the nested row.
Mar 6, 2015 at 4:56 PM
Of course, I should have tried that Daniel. Thank you! Excellent module all around!
Mar 10, 2015 at 12:28 PM
Now that 1.9 is on its way...

The most recent website I'm developing is build on the 1.x branch I downloaded on the 2nd of february. It relies heavily on layouts (nested grids, content items, html elements, ...).

Are there any breaking changes I should know about? Or will the upgrade to 1.9 be straightforward?
Developer
Mar 10, 2015 at 12:33 PM
If you're seeing the updated layout editor UI then you should be good. If not, then I recommend backing up your work first and do an export of your layout content items so you can manually tweak the XML for import. At least you'll need to change the <LayoutState> elements to <LayoutData>. If you run into any issues, just let us know.
Mar 10, 2015 at 12:40 PM
I've seen the updated layout editor, but this project still uses the grayscale editor. So I'm out of luck here...

I'll try your suggestions and see what happens.
Mar 10, 2015 at 3:31 PM
@sfmskywalker,

I followed your last drawbacks about AngularJS minification. You also need to use the same inline array annotation for controllers defined inside directives. See #21240, @thekaveman added another changeset to its PR

After a recent change to prevent from having a confirm dialog box when you leave the page, html elements are decoded twice when saved, so elements with percent symbol are broken. See #21222 for a possible fix

Thanks
Mar 11, 2015 at 7:32 PM
Edited Mar 11, 2015 at 8:52 PM
Sorry to be coming to this party late. I saw a few issues and had questions. I am working off of 1.x that I downloaded 2-3 days ago, so if these things are cleared up forgive me.

ISSUES:
1) When in the AdminUI and dealing with a Layout, the right hand side has a menu with Layout, Content, Media, Parts, Snippets, etc. The "Snippets" menu has two menu items. The first has the ALT text, but is BLANK. There is no text there so it looks like an empty menu item. It's ALT text is something like "An element that renders the elements_snippets shape". Not real clear on what that does.

EDIT: I noticed that Sipke wrote in his blog about Layouts that you could drop a razor file in your theme. So I am guessing this is currently empty if you do NOT have any snippet razor files in your theme. Still, it should not show up as blank I am guessing on the layout page.

2) When creating a layout a content item is created. I understand the workflow here and it was explained in this discussion and/or videos/blogs about the Orchard.Layouts module that you wrote Sipke. However, the content item that is created for the layout (MyLayout, for example) is then listed under Admin>Contents just like a page or any other "content" is. This is probably not user friendly as I could "View" this content item like a regular page (in other words, it is something that can be navigated to on the front end). You can see this page as Anonymous, too. This doesn't seem like it should happen. Is there any way to remove it from the Admin>Content list.

When looking at Orchard.Templates I noticed that when you create a template no content item is listed under Admin>Contents. I am not sure if this is because no content item is actually created. However, the point is that maybe the workflow of Layouts could be similar. Layouts we create should be listed under Admin>Layouts, but should NOT show up under Admin>Content.

EDIT: I just checked, and Orchard.Templates does create a content item. When you go to Admin>Templates you can click "View" and "see" the layout as well (although I did a test <p>Hello World</p> in the Template I created and when I view it I do NOT see that on the ~/Contents/Item/Display/15 page that is generated). I am not sure this should happen with either Layouts or Templates (i.e., that you can see them on the front-end).

QUESTION:
First, I like the way Orchard is heading. Much more for a user to do in Admin, less coding. This is a great thing. However, I recognize that in some scenarios coding will be necessary. For non-coders like myself, I'd like to code as little as possible to get functionality. Layouts is a step toward this for me. I do not mind coding Themes, ad-hoc shapes, etc., but coding functionality for someone like me is harder (like creating a module for something I need).

My question is on whether or not something like Layouts and Dynamic Forms can be used to create a front-end dashboard for users. So that User1 logs in, goes to a dashboard created with Layouts/Dynamic Forms, and only sees their content? I could see creating shapes with logic to display information when a) you have an incomplete form > show the form or some link to edit/create, b) list the form content (maybe just selected parts) in a summary fashion if it is completed, or c) some other static HTML, for example if something the user has to do cannot be done until another thing is done first. I understand that some of this HAS to be coded, but if I could limit my coding to logic within a view that would be great.

BONUS QUESTION:
I am going to ask about Orchard.Templates specifically in another discussion, but is this something that can be utilized to create razor c# templates for certain shapes (for example, to contain the logic I mentioned above). And can I then add these shapes (as elements, or some such) in the Layout?

Thanks for taking the time.

P.S. Just let me know if I should create Work Items for the issues I mentioned.
Mar 11, 2015 at 10:25 PM
In the latest branch, is there a way to show an image from the media library with a specific profile?
Developer
Mar 12, 2015 at 4:35 PM
jtkech - thanks for the feedback and tips - kaveman's update has been pulled in and the encoding issue has been resolved.

remesq
  1. Nice catch - this happens when you enable the "Layout Snippets" feature. I created an issue for it here.
  2. You're right, we want this to be similar to the way it's done for Templates.
  3. Layouts could definitely be used to have a configurable and personalized user dashboard. Best is to create an issue for this as a feature request.
  4. Yes, as you nicely described in that discussion, you can use Templates to create a template and use the Shape element to render that template.
NetWave
No, right now you'd have to override the Image element's shape template and render it using the Display.MediaUrl shape method. I don't think it's a bad idea to have that ability however. Would you mind creating an issue for this as a feature request?

Thanks everyone for your valuable feedback.
Mar 13, 2015 at 11:57 PM
Edited Mar 14, 2015 at 12:01 AM
Sipke, by looking at the code in your 'Image' element I was able to create a new 'Image profile' element.

It's basically a copy of your code with the addition of a 'profile' property. The view than renders the selected image with the chosen profile. Exactly what I need to ease the user experience of my customers.

However, one problem remains. You limit the width of the selected image in the designer so it doesn't stretch the page. This is done in 'Content.less':
&.layout-content-image, &.layout-content-vector-image {
    > .layout-element-wrapper > .layout-content-markup > img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}
However, my wrapper is automatically called 'layout-content-image-profile' (notice the -profile) so the rule doesn't apply. I've written a similar stylesheet, but I'm unsure what would be the best way to include it if I don't want to modify any code in your 'Orchard.Layouts' module?

I can't register the script in my views because elements are loaded with ajax.

Any ideas?
Developer
Mar 14, 2015 at 10:40 PM
One idea would be for us to provide a more common CSS class name that you could use in your views - we'll consider it.
Until then you can register your own stylesheets upfront by creating a class that implements IShapeTableProvider. This is actually what we did with Orchard.DynamicForms to register additional styles and scripts:
public class LayoutEditorShapeEventHandler : IShapeTableProvider {
        private readonly Work<IResourceManager> _resourceManager;
        public LayoutEditorShapeEventHandler(Work<IResourceManager> resourceManager) {
            _resourceManager = resourceManager;
        }

        public void Discover(ShapeTableBuilder builder) {
            builder.Describe("EditorTemplate").OnDisplaying(context => {
                if (context.Shape.TemplateName != "Parts.Layout")
                    return;

                _resourceManager.Value.Require("stylesheet", "DynamicForms.FormElements");
                _resourceManager.Value.Require("script", "DynamicForms.FormElements");
            });
        }
    }
Obviously we also created a resource manifest class.

Hope this helps.
Developer
Mar 15, 2015 at 2:29 PM
@NetWave - If you pull from 1.9-int, you'll see that you can use the "img-responsive" CSS class on your custom element's design view. You can apply it to either the <img> element itself or any of its parent HTML elements.
Mar 15, 2015 at 11:27 PM
IShapeTableProvider is an elegant solution to include my custom css. It works perfectly, thanks!

Of course, with the img-responsive helper class in place, there's really no need anymore for my custom css... ;-)
Mar 16, 2015 at 8:01 PM
Edited Mar 16, 2015 at 8:02 PM
There was some discussion of import/export on this thread previously (see @Miuu's notes and @sfmskywalker's reply).

I noticed (in latest 1.9-int) when exporting instances of the Content Widget, I'm ending up with an empty Id attribute; when I try to import (say, into a different site), nothing happens (no Content Widgets are created or updated).

e.g. on a fresh install with the Default recipe, creating a Content Widget for the homepage results in this being exported:
<ContentWidget Id="" Status="Published">
    <CommonPart Owner="/User.UserName=admin" Container="/Layer.LayerName=Default" CreatedUtc="2015-03-16T18:57:16.5115906Z" PublishedUtc="2015-03-16T18:57:16.5115906Z" ModifiedUtc="2015-03-16T18:57:16.5115906Z" />
    <WidgetPart Title="Test Content Widget" Position="1" Zone="Content" RenderTitle="false" Name="" />
</ContentWidget>
Nothing seems to be tying the Content Widget back to the original Page content item either.

Is this expected behavior? Should the element widgets defined by Orchard.Layouts (TextWidget, MediaWidget, ContentWidget) have the IdentityPart attached, or am I missing something else?
Developer
Mar 17, 2015 at 10:56 AM
Nice catch.
Two pieces are missing:
  1. As you correctly noted, those widget types need to have the IdentityPart attached so that their identity will be generated.
  2. The ElementWrapperPartDriver doesn't implement import/export.
I'll push a fix to the 1.9-int branch shortly.
Mar 18, 2015 at 3:56 AM
I have an existing module that relies on IHtmlFilter to process text with a flavor of 'html' (it processes <img> tags). This doesn't work with HTML Elements (or any other element I've tried). After a quick look it appears that Layouts doesn't use IHtmlFilter at all.

Can you suggest how I should hook output request processing for Html Elements?
Mar 18, 2015 at 7:55 AM
I think I can answer my own question. I am using IElementEventHandler to override Displaying() and am iterating over IEnumerable<IHtmlFilter> from there.

However, I'm wondering why you didn't do this? Am I missing something?
Developer
Mar 18, 2015 at 12:20 PM
No other reason than an oversight. It should be implemented similar to how it's done for the BodyPart.
Mar 19, 2015 at 1:08 AM
See issue 21278 for this.
Mar 20, 2015 at 3:23 PM
Sipke, I upgraded the project to the latest 1.9-int branch.

As you mentioned, <LayoutState> was renamed to <LayoutData>. The JSON data inside this element changed too much to make it work quickly (grids are now nested in a canvas, etc...). So we decided to recreate everything.

I had to lower the migration version to 1 to add the 'ElementDescription' column to the 'ElementBlueprint' table. Does this sound okay to you?

Futhermore, the new migration doesn't mention table 'ObjectStoreEntry' anymore. Can I delete it safely from our database?
Mar 20, 2015 at 4:23 PM
Edited Mar 20, 2015 at 4:23 PM
sfmskywalker wrote:
remesq
...
3 Layouts could definitely be used to have a configurable and personalized user dashboard. Best is to create an issue for this as a feature request.
...
Thanks everyone for your valuable feedback.
One additional question regarding this specifically:
  1. Would having the User Part in the menu under "Parts" a) be possible, and b) give the layout some type of ability to be personalized? In other words, would attaching the User Part to a layout be a step in this direction? I imagine probably not, but I just wanted to ask. I created a feature request issue, but the decision was that this was something probably better suited as a 3rd Party Module outside of Core.
Mar 20, 2015 at 4:29 PM
Edited Mar 20, 2015 at 4:31 PM
Sorry, but I forgot another thing I noticed solely related to user experience:

The Layout Menu on the right (Layout, Content, Media, parts, Snippets, etc.) is fully expanded upon creation of a Layout. Since the canvas itself is small at first (until you add stuff to it), the menu extends down the page, necessitating scrolling down every time you want to add something (say, after you click Save/Publish). I could manually click to collapse each menu item, but that's each time I do a new Layout. If I am working on a Layout and clicking Save/Publish, it retains the collapsed state of a menu item I previously collapsed.

Would it be possible to automatically collapse the menu items, or maybe have a button/link to auto collapse everything at once?
Mar 25, 2015 at 12:12 PM
Edited Mar 25, 2015 at 12:15 PM
@remesq How would you manage role permissions on the user dashboard? I didn't see any place where you could set permissions to the layout or to individual elements of the layout.

---Scenario 1--------------------------------------
We have 2 users, one has the role sponsor and the other doesn't. When they go to the landing page for sponsors, the one that has the role would see certain items on the page and the one that doesn't would see a different set of items on the page.

Ideally, we would like to have a single layout for this page, where the content in the page is managed in one spot on the admin side.


---Scenario 2--------------------------------------
The same conditions apply to users sharing roles and accessing a single layout dashboard:

User "John" has the role of sponsor and user "Bill" has the role of "Partner"

When John logs in, he is redirected to the dashboard, where he sees content specific for his role. Bill would see content specific for his role.


---Scenario 3--------------------------------------
User George has the role of "Sponsor" and "Partner" so George would see content for both.


Does this make sense? I'm fairly certain that the Layouts module doesn't support this...my hope is that it doesn't support it "yet".
Mar 25, 2015 at 3:03 PM
Edited Mar 25, 2015 at 3:21 PM
@dcinzona Well, not to say that this is the correct way, but what I did was:
  1. Create your Template using Orchard.Layouts (say "Template1").
  2. Enable Content Permissions (under Admin > Modules).
  3. Create a Content Type in Admin > Content Definitions > Create (say "ContentType1"). Add something in the Layout so you can have content. Use the layout Template you created. Later on when you get this working you can create your real Template and lay it out how you want it.
  4. Also ADD the Content Permissions part to the Content Type you are creating. At this point you have two choices I guess: a) set the Permissions that can VIEW/EDIT or whatever right on the Content Type, or b) do it on the Content Item you create from the Content Type. I chose "a)". Also, if you have created special permissions you can select those, but just for testing pick the standard ones. Note that you can limit what permissions are shown when you create a Content Item on the Content Type Permissions section, so that if you only pick "Admin" that is all that will show on the Content Item.
  5. Create the Content Item from the Content Type (say "ContentType1").
  6. Now, when you navigate to that page, AFTER setting the permissions, only those permissions allowed should see it.
  7. Because I saw some weird behavior (not always getting the redirect to "Unauthorized" page or message), what I wound up doing was creating a Workflow that has a User Logged In Activity > Branch Activity (put in the role you gave permission) > Is In Role Activity set to the permission >Redirect Activity, which takes the logged in user with permission to the Content Item you created. This last step really was for my use of two separate dashboards, so that say a Client goes to the Client page and an Attorney goes to an Attorney page (that is why I used a branch "Client, Attorney"), so the Branch Activity may not be necessary if its just one role.
As for displaying certain items to one permission on a page, and hiding or showing other content to another permission I don't know that this would be absolutely necessary. You may be better off just setting content permissions for each individual "Widget" or whatever you display. The system should just automagically show that stuff. However, a higher permission would necessarily see the other items too, which would duplicate content. This is why I went the route above. I create two Content Items, one for Attorney and one for Client that uses the same Layout.

The way I use this is I create a nice dashboard layout for each "tab" in the dashboard starting with a landing page dashboard called Main. I have content items that are pre-set up and pre-populated upon Client registration (say Matter Content Type along with a bunch of others) EDIT: I am still testing/creating a module to do this part. On the Main Dashboard, I use projections to display the content items specific to the user. I have content types for Payments (List Invoice, List Items Payments), Tasks (Task List, Task Items), Discussions (Content Type with Comments Part), just to name a few. These are all projected on the main dashboard. Clicking the "widget" / "shape" / ".cshtml" link, brings the user to that specific dashboard tab (say, Tasks Dashboard), which is just a big projection with tasks already created. So on and so forth.

For an attorney, I just create another content item using that layout and with the Main Dashboard showing all Tasks, all Discussions and all Matters in a top-level view, and allow the Attorney to drill down to a specific client. Again, I start with projections pulling this stuff into an area in the dashboard. Drilling down takes the attorney to specific dashboards, so they see Main = Small list of pending tasks (limit to 5 or 10 only) > drill down deep to specific task (takes them to Tasks Dashboard for specific client, actually a sub page of that Dashboard with details of Task for that client OR > drill down slightly to the Tasks Dashboard which gives a bigger list of all pending tasks (from here the Attorney can drill down deep to specific tasks).

This is off the top of my head mostly, so I may have left out some details. Just let me know if you have any questions.
Apr 13, 2015 at 4:35 PM
Edited Apr 13, 2015 at 5:25 PM
I just pulled the latest 1.9-int and I am running into a bug with Layout templates that I am not sure is known yet. When you create a layout template and then create a content item using that template and later go back and change the base template, the content item you created based on the template will have it's layout data not be in the correct positions.

Repro steps:
  1. Create new layout template with 3 grids inside the canvas. In the first and last grid add a row (1 column). In these new columns add a HTML element with any html content in it.
  2. Save this layout template and create a new page content item and set the layout to use the template you just created. In the second grid add a row (1 column) and in the new row add a HTML element with any html content in it.
  3. Save the content item and go back to the layout template and add a new grid element between the first and second grid elements (so it will now be the second grid element). In this new grid element add a row (1 column) and in the new row add a HTML element with any html content in it.
  4. Save the layout template and go back to the content item. You will now see that the content that was in our second grid is now in the first grids row column.
Edit: after reading the code I see that the template needs columns as the container and not grids. This unfortunately means that users can't create more columns without doing another grid -> row in the column which adds unnecessary html
Jun 1, 2015 at 7:05 PM
I'm running Orchard 1.9.0.0 and found what appears to be a bug in Layouts. I would be happy to log it, but I wanted to verify that I'm not doing something wrong. If this is the wrong forum, let me know.

In short: I have content type to which I have added three HTML-flavor text fields. When I drag one of these fields into a column element, all three fields are placed into that element.

Expected result: When I drag one of these fields into a column element, the selected field should be placed into the element.

Seems pretty obvious, but... is this a bug?