Responsive Visual webpart

[Devendra Singh]

We are evaluating if we create a visual webpart, will we be able to make it responsive as well? Considering we manage to create a custom master page and custom pagelayout that has RWD framework maybe Bootstrap.

Can we achieve this in a visual webpart or do we have mandatorily go with add-in model or just use Cotent Editor webparts? 

[#2]

I do not suggest a Visual Webpart, as it's kind of "deprecated", and if at some point you want to move to SP Online, you won't be able to use it. I'd suggest to create a Script Editor WP with the proper HTML, and a piece of JS with the functionality, using REST API or SP JSOM. Also, you can extract most of the JS code to an external JS file stored in the Style library, and just place the HTML and the JS "init" call in the Script Editor WP.

[#3]

Yes, correct. However, deploying all of these (HTML/CSS/JS) in different environments and stages when using Script Editor Webpart and then creating a page with the Script editor webpart and linked to the respective HTML/CSS/JS is something that I am not clear on. Any thoughts on this?

We would not want to do it manually in all the different environments.

[#4]

Remote provisioning is the answer here...you don't need to do stuff manually, you can automate all using this pattern and you have all what you need in the PnP project in GitHub. Just bear in mind that Luis' suggestion will work with classic SPO sites and for SharePoint OnPremises...with modern team sites, we don't know yet how to do the same (there is not a replacement yet for the script editor webpart)

[#5]

Yeah, didn't mention Modern sites, as is still unknown. However, if you're functionality is built on JS with some modern framework like Reactjs, it should be much easier to convert it in a new SPFx webpart.
Also, here there's a sample on how to provision a page with a script editor webpart on it, using PnP Core and PnP Schema:

https://github.com/SharePoint/PnP-Provisioning-Schema/blob/master/Samples/ProvisioningSchema-2016-05...

[#6 · Accepted solution]

Hi @Devendra Singh,

I would not recommend using visual web part at all for this kind of things. Sometimes it's harder, sometimes impossible (in SPO). I know that this recommendation is mentioned before. Just telling it again.

I would recommend using CEWP instead with a link to html hosted in SharePoint _catalogs/masterpage document library.

cewp.html acts as a container for your JS/HTML/web part's DOM, etc.

The web part communicates with SharePoint object model via JSOM or REST or SOAP (yes there are some things missing in other object models), depending on your preferences and functionality.

Responsiveness is managed by your CSS and in some rare cases with JS. It's possible to use Bootstrap to, but better to build it from .less sources excluding some parts (like normalize, scaffolding, type)  which break SharePoint styles dramatically.

Such model is easily deployable to different environments with gulp automation. You could check gulp-spsave or a boilerplate generator - sppp which creates a project capable publishing assests to sharepoint without manual configuration of automation tasks. Some Node.js background is needed, though. But it worth it. Cause you receive tons of automation capabilities, including live reload on dev environments.

Also, I would recommend SPMeta2 for artifacts code base provisioning as an advanced alternative for PnP provisioning, yet, PnP provisioning is better than declarative XML/CAML based no code features provisioning.

All of the mentioned above is easily integrated to the DevOps to repeatable deployment to the different environments.

Dealing with CEWP with script source is a step next to SharePoint framework. Most of the development workflow is very close to what you can face in SPFx and when SPFx is ready to you you'll be mostly ready to it.

--

Best regards,

Andrew