2

I'm having difficulties getting my list to display as intended. Can anyone help please?

I have a list, and one column is a calculated field which points to a JPG file. These are A4, scanned at 300dpi. The JSON formatting is intended to display a very small sub-section of the image -- but I do not appear to get things to work as intended.

My approach so far has been to (1) select the portion of the image I want, then (2) scale it to size. I do not want to use an image editor to cut out the relevant section. This has to be done using CSS.

If I mock up a normal HTML page, this gives an idea of what I expect:

img {
border: 1px solid red;
border-radius: 8px;
width: 1000px;
height: 320px;
object-position: 60% 73%;
object-fit: none;
transform: scale(.2, .2);
}
</style>

So, my JSON string is:

{
"elmType": "a",
"attributes": {
"href": "@currentField",
"target": "_blank"
},
"children": [
{
"elmType": "img",
"style": {
  "border": "1px solid red",
  "border-radius": "8px",
  "width": "1000px",
  "height": "320px",
  "object-position": "60% 73%",
  "object-fit": "none",
  "transform": "scale(.2, .2)"
},
"attributes": {
"src": "@currentField"
}
}
]
}

However, this gives no image whatsoever. If I remove the transform, I do get an image, but (a) it's not the correct portion of the image, and (b) it is, of course, far too large.

Is there a way I can solve this? Rather than use transform, could I potentially crop the correct portion of the image into a DIV, and then auto-scale that to a final size of 100x32px? Or is there another potential approach?

Many thanks.

3
  • Alas, no. It appears that my initial approach is not possible with the current SharePoint implementation. What is not yet clear is whether this is absolutely not possible, or whether it could be achieved but using a totally different approach. I'm still testing...
    – Phil
    Jul 31, 2023 at 10:16
  • It is not possible using SharePoint JSON for sure. You might need to build custom solution (maybe SPFx field customizer) for your requirements. I will update my answer. Jul 31, 2023 at 12:02
  • Hi @Phil, does my below answer help you in any way? Let me know if you need any further help on this question. Aug 18, 2023 at 14:08

1 Answer 1

0

I don't think this is possible using SharePoint Online JSON formatting capabilities.

SharePoint JSON formatting does not support object-position and transform scale style.

SharePoint JSON only supports translate(arg) and translate(arg, arg) for transform style.

You can check list of supported styling properties at: SharePoint JSON formatting - style


Update:

You will have to use the SPFx Field Customizer extension for your requirements to customize the display of SharePoint list column.

Check this Microsoft official documentation: Build your first Field Customizer extension

You can find some SPFx samples which might help you to get started with at: SPFx extension samples - check folders with name contains -field-.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.