Hi everyone,
I want to create a language column for my document library. People who upload their documents should be able to select multiple languages. And after checking in the document, the languages appear in form of flag icons in the column. So they select the written language, but other people see flags and the names only when they hover above the flags.
As for the flag icons: I downloaded a png library and uploaded the pictures to SPO. I found a JSON code that partially does what I want it to do (please find code below). But I have several issues with this code:
- the drop-down menu only shows the flags instead of the countries, which would be fine BUT
- the drop-down menu shows the flags in a weird formatting (below each other, but very offset)
- one column might contain many flags, so I want it to have a line break after 6 flags
I know its a very extensive question, but hopefully someone here might be able to help me :) I am not that good with JSON, so this is rather difficult to me.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"justify-content": "flex-start",
"padding-left": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"min-width": "22px",
"width": "22px",
"max-width": "22px",
"margin-right": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if(indexOf(join([$APAC]','),'Australia') != -1, 'inline', 'none')",
"width": "100%"
},
"attributes": {
"src": "= @currentWeb + '/SiteAssets/Images/country-flags/at.png'"
}
}
]
},
{
"elmType": "div",
"style": {
"min-width": "22px",
"width": "22px",
"max-width": "22px",
"margin-right": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if(indexOf(join([$APAC]','),'Brunei') != -1, 'inline', 'none')",
"width": "100%"
},
"attributes": {
"src": "= @currentWeb + '/SiteAssets/Images/country-flags/bn.png'"
}
}
]
},
{
"elmType": "div",
"style": {
"min-width": "22px",
"width": "22px",
"max-width": "22px",
"margin-right": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if(indexOf(join([$APAC]','),'China') != -1, 'inline', 'none')",
"width": "100%"
},
"attributes": {
"src": "= @currentWeb + '/SiteAssets/Images/country-flags/cn.png'"
}
}
]
},
{
"elmType": "div",
"style": {
"min-width": "22px",
"width": "22px",
"max-width": "22px",
"margin-right": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if(indexOf(join([$APAC]','),'Hong Kong') != -1, 'inline', 'none')",
"width": "100%"
},
"attributes": {
"src": "= @currentWeb + '/SiteAssets/Images/country-flags/hk.png'"
}
}
]
},
{
"elmType": "div",
"style": {
"min-width": "22px",
"width": "22px",
"max-width": "22px",
"margin-right": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if(indexOf(join([$APAC]','),'Indonesia') != -1, 'inline', 'none')",
"width": "100%"
},
"attributes": {
"src": "= @currentWeb + '/SiteAssets/Images/country-flags/id.png'"
}
}
]
},
{
"elmType": "div",
"style": {
"min-width": "22px",
"width": "22px",
"max-width": "22px",
"margin-right": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if(indexOf(join([$APAC]','),'New Zealand') != -1, 'inline', 'none')",
"width": "100%"
},
"attributes": {
"src": "= @currentWeb + '/SiteAssets/Images/country-flags/nz.png'"
}
}
]
},
{
"elmType": "div",
"style": {
"min-width": "22px",
"width": "22px",
"max-width": "22px",
"margin-right": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if(indexOf(join([$APAC]','),'Taiwan') != -1, 'inline', 'none')",
"width": "100%"
},
"attributes": {
"src": "= @currentWeb + '/SiteAssets/Images/country-flags/tw.png'"
}
}
]
},
{
"elmType": "div",
"style": {
"min-width": "22px",
"width": "22px",
"max-width": "22px",
"margin-right": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if(indexOf(join([$APAC]','),'Thailand') != -1, 'inline', 'none')",
"width": "100%"
},
"attributes": {
"src": "= @currentWeb + '/SiteAssets/Images/country-flags/tl.png'"
}
}
]
},
{
"elmType": "div",
"style": {
"min-width": "22px",
"width": "22px",
"max-width": "22px",
"margin-right": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if(indexOf(join([$APAC]','),'Singapore') != -1, 'inline', 'none')",
"width": "100%"
},
"attributes": {
"src": "= @currentWeb + '/SiteAssets/Images/country-flags/sg.png'"
}
}
]
}
]
}
