Moving to client site development in SharePoint 2013

Question

I am new to SP as a developer but experienced as SharePoint users. I am moving to SP development side ( I have depth .NET programming knowledge). As a first assignment I am in need to convert a InfoPath form (some logic are there) to SP site. I don't want to go server side (I should be forbidden not use Visual Studio targeting SP online). I am not glad of course!

I have crated a site and created all required SP columns. What I need now are:

1. Populate some information from AD when the site loads first.
2. Show hide some SP columns based on choice selection.
3. Show modal pop-up (with some actions) freezing the current page etc.
4. Toggle a control section based on dropdwon/choice selection.
5. Some validations based on people picker selection.

I have knowledge on CSOM, JSOM and REST API. What I need to know is

from where to start the client site scripting development?

Should I use ScriptEditor and write everything there? or Should I use CEWP and write all script there in the current web part? or I should go globally (means all JS references in Master pages and write separte js file and upload them)?

From the architectural point of view I want start from a central point. Advance help is appreciated!

Answer 1

If it's an InfoPath form, I'd start with a custom List, and customize the list forms (New, Edit, and/or Display), and inject your javascript there, preferably just reference only javascript file for easy modification. To add, I'll address each of your 5 points

• Populate some information from AD when the site loads first. You can do this using REST API with some user profile information calls.
• Show hide some SP columns based on choice selection. Using jquery/javascript
• Show modal pop-up (with some actions) freezing the current page etc. You can use the SP.UI.Showdialog function in order to popup a modal dialog. Modal pop up in Sharepoint
• Toggle a control section based on dropdwon/choice selection. using javascript/jquery
• Some validations based on people picker selection. Use the PreSaveItem

Answer 2

I agree that a custom list should be created as well as using the CEWP to do code behind. Note that in SharePoint 2013 InfoPath forms only allow code behind in SP designer 2010.

I would use JS to create the Hide and show fields I have added a good blog to support how you should convert the code http://www.sharepointdiary.com/2013/04/show-or-hide-list-form-field-based-on-another-field-value.html

This is a good starting point