SP Designer HTML PeoplePicker

Question

Im trying to have a bootstrap dialog as my list form, and im then using a bit of javascript to take the new values in the modal div and create a list item. All works great.

Problem I have is I want a people picker as one of the fields. Ive tried one of the many bits of code ive found but nothing seems to work, all combos of HTML and javascript.

All the code at the moment is in the home aspx and im using SPD2013 as the editing tool.

The top bit of the code is yello but if I try to go into advanced mode it seems to break the entire page.

Anybody got any pointers?

Thanks Mark

Answer 1

Im using jQuery addClass method to do the same thing:

All input text:

$('input[type=text]').addClass('form-control');   

All dropdowns:

$('select').addClass('form-control');

All textarea/multiple lines

$('textarea').addClass('form-control');  

All People Picker

$("div[id$='UserField_upLevelDiv']" ).addClass('form-control');

The selector of $("div[id$='UserField_upLevelDiv']" ) Im applying the class in all elements where id ends with UserField_upLevelDiv, in my site collection all people pickers ends with UserField_upLevelDiv, so if your peoplepicker id ends with another name you can use the selector: $("div[id$='endsofyourID']")

So my page load is:

$( document ).ready(function() {
    $('input[type=text]').addClass('form-control');   
    $('select').addClass('form-control');   
    $('textarea').addClass('form-control');   
    $("div[id$='UserField_upLevelDiv']" ).addClass('form-control');
});

And Im using:

jquery-1.12.1.js
bootstrap.min.css

Another tip: Try to make an external javascript file and attach it in your Master Page.

Answer 2

thanks for the reply. Im not sure that's entirely what I need.

I have a bootstrap modal with an input field in (just using straight html tags). When I type into this field I effectively want it to look up to Sharepoint and make sure its an actual name. (the same as a person field on a normal sharepoint form). I tried your suggestion which did apply the class but that was it?

Ive worked a hack by putting a custom form URL into an iFrame and put this into the modal body but it seems very hacky and doesnt really work as smooth as Id like.