We need your feedback: Layout widgets improvements - Feature Previews & Betas - Feature Previews & Betas - Progress Community
 Feature Previews & Betas

We need your feedback: Layout widgets improvements

  • We need your feedback: Layout widgets improvements

  • Hello everyone,
    We are gathering ideas and feedback about how the users work with layout widgets in complex
    template layouts. 
    It will be very helpful for us if you are so kind to answer the following questions:

    1.  What kind of problems do you encounter when working with layout widgets? What is
    your typical/most common use case scenario?

    2.  How complex templates do you have - like numbers of placeholders, closeness and do
    they overlap? Screenshots and example master pages will help us a lot (we will
    use them for usability testing).

    3.  What is the type of templates you most commonly use: 
             a. master page with defined placeholders
             b. template from scratch with added layout controls
             c. a combination of master page with defined placeholders and layout controls

    4.  How deep is the nesting level you reach when using layout controls (the maximum number of layout controls inside layout controls you had to place to achieve a desired result)?

    5. Do you need an ability to name your placeholders and if yes, why?

    Looking forward to start a discussion on the topic and see what the issues you encounter
    are and how we can address them.

    Any comments and feedback are welcome.

  • You have my feedback on the other post, and the issues list on my site, but let me also just note an important one...being able to choose\set the element names.

    Just like we can set the wrapper element (div, section, etc) on the ContentBlock I'd like the same on the layouts if possible please.
  • How about something basic that have been advocated quite frequently and existed in 3.7. Don't allow widgets to be dragged and dropped in to any area except for a widget placeholder. Dragging and dropping anywhere produces strange bugs and defeats the purpose of "widget placeholders". Also put the names of the placeholders that are coming from the masterpage since this helps content editors and designers make sense of it when the edit mode isn't identical to the public view of the design.
  • I'd even prefer the names to be subtle overlays than taking up more space on the page, even if they're 20px high it adds up...and layouts need to have names as well (at least on the page template level, not just masterpage placeholders).  Also @Basem I'm not sure if you'll agree, but a way to set a better name would be preferred (not just showing the "ID" as you can't have spaces)
  • Yes! Any name would do really because guessing isn't fun nor accurate.
  • +1 for Steve and Basem comments 
  • Also please an option on a layout to ignore responsive rules, or a set to pick which it will be allowed use.
  • Also need I say... optional Twitter Bootstrap support!
  • Pretty much what has been said already.  The ability to have some type of placeholder labeling built into Sitefinity and a more transparent overlay UI for edit/more drag actions. 

    Complex designs that make use of position offsets very easily break in the backend due to the extra space overhead that is created by setting min-height for the widget toolbars and docking zones.  One suggestion I have had in the past was to check the feasibility of having a small overlay icon that would indicate to users where they can edit and when they hover over the widget then push some type of edit overlay where you can handle the drag/edit/more scenarios.

    Better custom page layout support would be nice too.  There are known bugs sitting in PITS where some weird issues occur and I think Steve has outlined them in his blog and other channels as well.

    There is also a bug that I have issued through PITS long ago where using things like iframes in content blocks and/or flash files can prevent users from being able to edit page layout properties.  One quick example is that I just put a 6.3 site together and dropped a Google Map onto the page via content block.  When going to edit the layout properties you find the dialog does not allow you to view spaces or classes.
  • 6bdf4d1e-37c1-6deb-a958-ff0000446526_margins.png
    Here is another good example of some issues I run into when trying to utilize layout widgets.  I want to set margins on them, but I do not want the margins to be rendered as inline styles in the html markup so that I have better/easier control over them via css.  This is really key when I am working with responsive designs

    So let's say I have a 50/50 widget where I add a class called .custom-margin to both column 1 and column 2.  What happens is that both columns get the correct margin, but they break out of the main content area and sometimes become obscured by other widget in the template.  Setting the exact same amount of margin on each column via the UI will work fine because Sitefinity re-calculates the width of each column (which can be annoying too). 

    Basically if there was a better way for Sitefinity to calculate dimensions using box-sizing: border-box; when custom css classes are assigned to widgets.

    Attached is an example of what I am talking about.
    The first set of layouts in the screenshot is where I add my own css classes.  The second set shows what happens when using the Sitefinity UI to set margins.

    I understand what I am asking for is probably not something elementary to do, but food for thought.
  • Responsiveness part has to be improved I guess. There are 3+ sections where you have to manage rules, that's confusing (Settings, Responsive and Mobile Design Section, Template Itself). Responsive styles are attached to the page (frontend) as a separate file, no option to bundle it.
    I guess, as Asp.net Web API team decided to use third party json serializer (newtonsoft),  you could delegate this task to a third part specialized in it, and include Zurb foundation or Bootstrap.

  • Clicking edit to add a css class to a layout seems to force it to add inline style attributes with the percentages set.

    Let me disable the properties edit dialog on custom layouts (mainly due to the above bug, but we also don't want our client resizing the columns anyway - currently using a css hack to hide the edit button).

    Add a tab layout control with nice html.

    I've seen a few people try support bootstrap columns but there's been issues
  • I agree with pretty much everything that has been said above, but I have a "nice to have" feature that I think would be a huge help.

    The ability to export my master page, page templates, widget templates, and themes into a zip file and then import them into another Sitefinity environment. This option would be huge for your marketplace.  Imagine if I could visit the Sitefinity Marketplace, inside of the Sitefinity CMS, and pull down a new theme, master page, widget templates, or page templates.  Platforms like word press have been able to pull down new themes and even new functionality for years.

    In know this a little outside the scope of this forum thread but wanted to see what people thought.

  • Here are my two cents

    I usually create my own .master file in VS. Then I base page templates on that master page giving the clients either

    1) different design and/or
    2) different layouts

    My clients usually then just add layout widget on page levels which mostly would be some 50%/50%

    2) On my newes site I have only 3 content placeholders in my .master and the rest will be done in page templates with layouts. I could have .master with one row for example. Then create a page template that would split that into (25/75). 25 % for secondary navigation.

    One think I would like is haveing the ability to have fixed colum width: 200px,*

    3) see above c)

    4) contentplace holder on .maste and tow layoutcontrols usually do it for me

    5) It sure would be nice. Sometimes when it gets a bit complex


    - Yes it would be nice if you could prevent dropping in outside placeholders
    - I had issues where it was hard to acces some content dropped because maybe some of my placeholders where only 30 pixels high.