Forum Discussion
Document Library: how make column with drop-down menu of languages that shows flags in the column?
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'"
}
}
]
}
]
}
2 Replies
abunte This is certainly a common requirement, and I appreciate you taking the time to explore a solution using JSON formatting. While the code you've provided is a good starting point, I can understand your frustration with the formatting issues you're experiencing.
One potential solution that I would recommend exploring is the use of a custom column web part built using the SharePoint Framework (SPFx). This approach would give you more control over the user interface and the underlying logic for populating the dropdown menu and displaying the flag icons in a more organized and user-friendly manner. By developing an SPFx web part, you could create a custom column that not only displays the language options in a dropdown, but also ensures the flag icons are properly aligned and includes hover tooltips to show the country names. This would address the challenges you've encountered with the formatting and the lack of country name visibility. The key benefits of this approach are the increased flexibility and customization options it provides. You'd be able to tailor the web part to your specific requirements, such as implementing the line breaks you mentioned to keep the flag icons organized, and integrating the selected language data directly with the SharePoint column.
While building a custom SPFx solution does require a certain level of technical expertise, the end result can be a highly polished and seamless user experience that meets the unique needs of your organization. I'd be happy to provide more detailed guidance on how to approach this project, including recommendations for resources and best practices to help you get started. Please let me know if you have any other questions or if there's anything else I can do to assist you in addressing this challenge. I'm here to support you in finding the most suitable solution for your SharePoint environment.
- Anyone ever figure out a similar solution? Looking to do the same without external APIs or anything - just keep it simple.
