Modernization: Designer Tool for Page Layouts

[pkbullock]

Category

[ ] Bug
[X] Enhancement

Expected or Desired Behavior

Make editing the layout of web parts easier. This issue is raised to go through the design and functionality.

Features/Design

• Allows upload of XML files for "visual" designing. User runs analysis tool, User edits with designer, then modernizes pointing to file.

• Drag and drop interface support for

• 
  
  • Rows and Columns (Add, Delete) + vertical sections
  
  
• 
  
  • JS logic for layouts must output a valid XML file
  
  
• 
  
  • Supports 2010-19 and SPO.
  
  
• 
  
  • This could be SPFX based since the target is always SPO.
  
  
• 
  
  • Users upload file - need to think about user flow. Simple the better.
  
  
• 
  
  • Consider modify both Export-PnPClientSidePageMapping and/or -PageMapping on ConvertTo-PnPClientSidePage to accept input of a document library file using the target context connection.
    
    -- SPFX loaded in the same site could read a designated location for the file to load into the designer.
  
  
• 
  
  • Locations on designer should be representative of those in SP. (of course)
  
  
• 
  
  • User Flow: Export-PnPClientSitePageMapping reads source and uploads to SPO library, Designer tool reads this > loads allows editing > User Runs Convert command allowing input from the same file.
  
  
• • Hidden (or not) Transform Mapping library in target site

• Needs to cater for security and data storage.

• Use common standards and frameworks e.g. UI Fabric, React etc.
• Separate tool not deep integrated into Framework.

I will add diagram of proposed flow.

[pkbullock]

Proposed User Flow

This should require some changes to cmdlet and core + new SPFX. Hopefully reducing development effort and complexity. Might be something I have missed...

[jansenbe]

Looks good @pkbullock . The main thing is the UI to graphically design...whether the file is stored in SharePoint or not is not so relevant in my opinion. I would recommend focusing on the design part first as that really adds a ton of value.

[pkbullock]

Agree UI design is important and is next on my list to design e.g visual example. I was thinking the designer loads the XML file to list out which web parts, metadata and header config to give to user as options. I will put together a POC UI as a guide. Will post back when done.

[pkbullock]

Page Layout Designer V0.1.pdf

@jansenbe , i have created a rough idea of the UI and UX. Although there are not too many notes against this, hopefully it should easy to understand what i have done here. Framework wise, Fabric UI, React Based and there are some possible grid designers already out there we could consider.

In future enhancements this can potentially be expanded to include other types of mapping files. Later of course.

I have a ton of time coming up for ESPC, i am tempted to create a POC, perhaps if we meet can discuss some of the ideas over a pint?

[jansenbe]

Excellent work, the UI mockup looks great! Let's discuss at ESPC @pkbullock

[pkbullock]

From some quick feedback, checkout the FAQ section for any quick wins or include in design then decide implementation roadmap.

[pkbullock]

@jansenbe to avoid any confusion when i asked about your SPFx skills earlier, it wasn't in reference to expecting you to code this up, i am working on this feature at the moment.

[jansenbe]

I was aware of that :-)

[pkbullock]

Just an update, i had started this, but paused to focus on the core engine issues atm, will resume as a side project but pls let me know (privately if you wish) if you hear of MS working on similar plans, i don't want to duplicate effort

[jansenbe]

We're not working on anything here, the only thing on my radar is to better document the option one has when creating page layout mapping files

[pkbullock]

Going to look at moving this forward. Been looking at using the SharePoint Target Page itself as the designer.

Transform Once > Adjust > Capture > Replay Layout... Each web part on the page has an instance ID, the sections (rows), columns, Order, all returned by the Get-PnPClientSiteComponent, therefore its in the core, thinking of caching then replaying the changes..... might be quicker to code than full blown app for UI design. I started the app but v high amount of coding - need to explore something we already have.

Will clone and play with this one, see the possibility.

[pkbullock]

Replay, that would be a good name for it if this works....might need to include saving the config to a file. One thing at a time.

[jansenbe]

Using the page as design canvas would be very cool indeed!

[pkbullock]

Update, I am almost finish writing the preview version for this, just need a little more testing and defensive coding.

[jansenbe]

Closing this one @pkbullock, the idea still stands but let's rethink this when we rework our moderzation tooling