New Microsoft Lists sample: internal CV with JSON view formatting

[Fedes365]

Q	A
Bug fix?	no
New sample?	yes
Related issues?	no

What's in this Pull Request?

A sample to create a basic internal CV through JSON view formatting. Thanks to JSON formatting, it's possible to create a large custom card to be used as a form itself, by taking advantage of the inline editing feature.

[Fedes365]

@tecchan1107

Ouch 😖 worked till late night and after reading it again I noticed some english writing mistakes in my tutorial. How can I solve it? A message here says "Add more commits by pushing to the master branch on Fedes365/List-Formatting"

Does it mean I can update my fork and the pull request would be updated automatically? 🤔

[tecchan1107]

@Fedes365 Yes! When you update it, the pull request will automatically update too!

[Fedes365]

Ok, thank you! I will try to make some (small) text corrections and I will give you an update 👍

[Fedes365]

@tecchan1107 wow it worked! 😅

Thanks again for your support!

[Fedes365]

@tecchan1107 and @shagra-ms

A user reported that his profile picture is not correctly displayed and it's replaced by a grey placeholder. This problem occurs in some tenants, I don't know why.

Here is what I used in row number 86 of the JSON code:

"src": "=@currentWeb + '/_layouts/15/userphoto.aspx?size=L&accountname=' + [$Author.email]"

In my test, I tried to use the getUserImage operator as alternative, but for unknown reason a user profile picture is not displayed when large size is selected and it's replaced by a grey placeholder. Again, this problem occurs in some tenants, I don't know why.

Scratching my head 🤔

[shagra-ms]

@Fedes365 Can you manually navigate to the above URL for the user to confirm a user photo exists? In both approaches.

BTW, thanks for amazing sample contribution. 😍

[Fedes365]

@shagra-ms thanks for your feedback!

Ok, deleted again everything (temporary files, cookies) from Edge.

Method with =@currentWeb + '/_layouts/15/userphoto.aspx?size=L&accountname=' + [$Author.email] Result: yes, I can manually navigate the URL and I get my current profile picture. The URL image returned is something like this:

[https://MY-TEST-TENANT.sharepoint.com/_vti_bin/afdcache.ashx/_userprofile/userphoto.jpg?_oat_=1671862753_af43ae8e967493f85b33e88095c01aa5e468b183d39a4c39c5606777daa65380&P1=1671801996&P2=864232212&P3=1&P4=wPsrXrODR6EfLsnhwYN4j4pdPAttilDgDZybInMWPylwJ2SCJiO0ti8Zgy7rl%2fhtmkcLeCdBc618wbtkb0i%2fG6Yqp8O6TLe1Hmf7FkkY%2fNiuL0mQQMgVk3tcXXTFPXk5dvvyTSuOzzmBkMOzeDhJtBV4mgNoui44tHH%2bl5wWRwye9Mk17gIEamjbMfoPk2TnfMNb03QSWKciazKGh4BlaVovxxVmUQ8ntn9IxEsrF%2bb0s4OFB7%2bJAhz66KlfU6PZchkaN0QyEQpU%2bwsnWiXRiRfK2Hx%2fqkEwZy98ygevexyQDH93Xhd3v0%2fX35i2MzJ%2fjjGxF8ZzdMJ%2fUHyAbS9KIQ%3d%3d&size=L&accountName=fsapia@ MY-TEST-TENANT.onmicrosoft.com]

Method with "src": "=getUserImage([$Author.email], 'large')" Result: and now it worked 😅 Checked in the DOM of Edge and the URL image has the same structure of the one above. Copied, pasted, Enter and I can manually navigate that very long URL.

Yesterday, I got the same placeholder image of the user that reported this issue and now it works even though I perfomed the same testing again. But it still doesn't work for the user with both methods. Further detail: this user has a completely different tenant (he works for another org).

I really don't know what it may depends on. As you can see, I used pieces of code already used in other PnP samples. I don't know if there is something I'm ignoring that may have impact on the first user experience 🤷‍♂️

[Fedes365]

UPDATES:

1) Fixed small pieces of the JSON code for a better user interface 2) Added details about the custom hovercards and the empty card immediately after a new item creation 3) Added info about images and icons to be used in a private cloud repository (eg. SharePoint) 4) Uploaded 2 new demo gifs to show the appearance of a hovercard and a sample empty card.

[tecchan1107]

Hi @Fedes365 . Sorry for the delay. And thank you for the very very beautiful sample😍😍✨ One thing I would like to confirm about the Landscape images, are there no issues with copyrights or redistribution of these images?

[Fedes365]

@tecchan1107 Hello and thanks for your feedback! 💙

With regard to the landscape images, I used this pic coming from Freepik:

https://www.freepik.com/free-vector/forest-moutain-scene_2770107.htm

This pic has a free license, which allows the following:

• For commercial and personal projects
• On digital or printed media
• For an unlimited number of times and without any time limits
• From anywhere in the world
• To make modifications and create derivative works

Based on the last point, I edited that vector, by removing or recolouring its paths for each hovercard.

Anyway, I think that attribution would be required and if you check that link above, there is a small clickable item on the right side explaining "How to attribute?". According to the instructions provided there, writing "Image by brgfx on Freepik" should be compliant with the attribution requirement.

Let me know how to proceed. You pointed out an important issue I forgot to manage in my tutorial 😨! Therefore, I could push a new commit to include a proper attribution... unless there are other solutions for this case.

Thanks again!

[tecchan1107]

@Fedes365 If you want to use it in print or digital form, you can just put a credit on it, but looking at the following link "8. License Agreement for Freepik Content", distribution seems to be forbidden. If the processed images are published on GitHub, it may fall under distribution. (I don't know exactly, though.)
https://www.freepikcompany.com/legal#nav-freepik-agreement

To avoid problems, I am sorry, but I would like you to remove Freepik images from the solution and modify the sample to not use Freepik images😖 (Yammer and Office icon images may also not be a good idea to include in your solution, you may want to use Fluent UI Icons or something similar.)

[Fedes365]

@tecchan1107

Hello Tetsuya! Unfortunately you are right! I've read that further detail about Freepik Content and it seems we can't even use and distribute derivative works... ok 🙄

Therefore, I had to push several commits to make everything consistent with this change. Now everything should be fine and compliant. Please, let me know about this update and thanks for your support! 💎

[tecchan1107]

@Fedes365 Thanks for the update! I have done the merge, please check the following link. (I made some minor adjustments when merging.) https://github.com/pnp/List-Formatting/tree/master/view-samples/internal-cv

Please let me know if you have any questions.

Again, thank you very much for the very, very excellent sample and the detailed README!

[tecchan1107]

Also check out Sample Solution Gallery page!

• https://adoption.microsoft.com/en-us/sample-solution-gallery/sample/pnp-list-formatting-internal-cv/
• https://adoption.microsoft.com/en-us/sample-solution-gallery/Fedes365/

[Fedes365]

@tecchan1107 Yahooo! 🥳