Foto to add/substitute to loggedin user in info bar

API & Customization Ask Developers
1

How to add/substitute to the loggedin name in info bar the user foto?

image

image

Thanks guys! :smiley:

2

Hi @MichaelG.

To do this you’ll have to add some custom code. The basic approach is to add some jQuery to catch every screen update, get the current Account’s record (assuming you have added a field to the Account object for their photo), then use jQuery to inject that into the HTML. The easy way to get the currently logged in user is to use a view-based API call to access a view that’s been created to show the details of the current user. I’ve inserted some sample code below which can act as a guide for this, but you’ll need to create that view, create the profile photo field in the Account object, and update the reference to those in the code below. Also once you get it inserted you’ll probably want to do some CSS to get it aligned properly.

Good luck!

Eric

$(document).on('knack-scene-render.any', async () => {
  var ajaxGetRecord = await $.ajax({
    url: 'https://api.knack.com/v1/pages/scene_11/views/view_13/records',
    type: 'GET',
    headers: {
      'X-Knack-Application-Id': '{API_ID}',
      'Authorization': Knack.getUserToken(),
      'Content-Type': 'application/json'
    }
  });
  var imageURL = ajaxGetRecord.field_19_raw.url;
  $('.kn-current_user').prepend(`<img src="${imageURL}">`);
});
1 Like
3

Thank you very much @EricAlderman .

I’ll try that and keep you updated.

4

Hi Eric,

Working again on that. I do have a user contact view with the photo. So as you said I included the scene, view and field numbers. It doesn’t show the picture. :thinking:

$(document).on(‘knack-scene-render.any’, async () => {
var ajaxGetRecord = await $.ajax({
url: ‘https://api.knack.com/v1/pages/scene_862/views/view_2083/records’,
type: ‘GET’,
headers: {
‘X-Knack-Application-Id’: ‘{API_ID}’,
‘Authorization’: Knack.getUserToken(),
‘Content-Type’: ‘application/json’
}
});
var imageURL = ajaxGetRecord.field_422_raw.url;
$(’.kn-current_user’).prepend(<img src="${imageURL}">);
});

5

And actualy I would like to hide the name, to only show the contact picture.

On another note, I need to position always the whole current user info to the right, instead of putin a huge margin to the left :man_shrugging:t3:. it’s like justifying inside the page. tks

div.kn-current_user { margin-top: -55px; margin-left: 700px; }