Show User Image/avatar in App header

Well I know its not a critical thing for a web application but I am trying to show user image on top of the app header or User intro using javascript just like you have in knack support website.

I have an image field in user object where my users have uploaded their profile pics. The problem is I don't know how to retrieve the image asset link using javascript. I don't even know if its possible using get user attributes.

Can anyone please point me to right direct if not the complete solution. I will really appreciate.

Thank You

Justin to Obtain amazon Guid

Create a new link field in the same user object where you have your user avatar image

Use conditional rule and set the to a record value and select picture field


that is it. You will see the amazon guid is stored in the link field


you might need update record once to get the GUID

Hi Ajay,

To make dynamic links you can use text formula to re-create the unique url and then a conditional link field to store the result in link form. See these pics for an example.




As far as the get request you can get the user attribute for email and save as a variable and then use filters in your ajax request to match that Variable to the email field on the object. This will help you locate the record then return the image link field value. Here is an example of using filters from the knack dev docs.

If you could post in more detail about how you were able to save the amazon guid I'd be very interested.

Good Luck.

Cheers Justin

Justin

Thanks for the reply. I think you are right about the approach but I am not so good in JavaScript.

But I was able to record the second string (Amazon GUID) in a field. In User object I created a new link field and put a conditional rule on it to record value of the original image field and it gives you back the second GUID. But here is my problem i have three GUID in my image link which I have figured out as below.

https://s3.amazonaws.com/assets.knackhq.com/assets/57587412f7082d7756c3192a (App ID)/598b65875f826e25147bf (Amazon GUID)/original/c3e4a3d1e58749d5b5469a9efc460548 (Record ID).jpg

Now I don't know how to write the code to get all three GUIDs to generate Image link using JavaScript. Also my Image is stored in role object not the main user object. So I was trying use JavaScript Utility Functions in Knack developer docs but it does not give you field values of roles right now.

Can you help me to //GET parsed url for image location from logged in user/field. part of the code and I think I can figure out the rest code.

Thanks

I hope this is helpful. Before you can write the GET request for the image You'll need to parse the url where the image is stored so you can recreate it.

So double click on an image example to get the url. It should look something like this.

https://s3.amazonaws.com/assets.knackhq.com/assets/984f3c1570b8cf5554ktt927/5944718393f2f04a0ecc880d/original/fieldname.png

This portion of the url should remain static: https://s3.amazonaws.com/assets.knackhq.com/assets/

as well as the end portion: /original/fieldname.png

The first guid you see is your application ID. (984f3c1570b8cf5554ktt927) I've changed it here for security.

The second string - I cannot identify - it doesn't look like the knack record id so I'm guessing it is an amazon guid for the image record.

If you can figure out how to record that GUID upon record creation and save to a field on the user object then you can reconstruct the image address in a link field within knack and retrieve it when you want to. This will be the tricky bit. It might not even be possible.

Next write your code

(document).on('knack-page-render.any', function(event, page) {

//GET parsed url for image location from logged in user/field.

//Use jquery to insert it into the header

//You will probably have some page load timing issues. }
});

Good luck and please let me know if you are able to figure it out. I'd love to see the final code.