generic lookup field colored pills

[jaxkookie]

| New sample? | yes

The JSON code to dynamically add colored pills to lookup columns. If you have a lookup column with more than 10 values, or a lookup column that can have additional items added, managing the pill colors can be time-consuming. The code will calculate a color, background, and border color based on the length of the lookup value and the lookupId.

This code can be applied to any lookup column

 { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "flex", "flex-wrap": "wrap", "width": "100%" }, "children": [ { "elmType": "div", "style": { "margin": "2px auto" }, "children": [ { "elmType": "div", "style": { "vertical-align": "middle", "white-space": "nowrap", "width": "auto", "padding": "5px", "color": "=if( ((((ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5)) % 255) / 10) * 10) * 0.299) + (ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10) * 0.587) + ((255 - ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10)) * 0.114)) ) > 145, '#000000', '#ffffff')", "background-color": "='rgba(' + (ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5)) % 255) / 10) * 10) + ', ' + (ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10) + ', ' + (255 - ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10)) + ', 1)'", "border-width": "2px", "border-style": "solid", "border-color": "='rgba(' + (255 - ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5)) % 255) / 10) * 10) + ', ' + (255 - ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10) + ', ' + (ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10)) + ', 1)'", "border-radius": "25px" }, "children": [ { "elmType": "span", "style": { "padding": "8px" }, "txtContent": "@currentField.lookupValue" } ] } ] } ] }

[tecchan1107]

Hi @jaxkookie ! Thank you for the awesome sample!

However, this pull request does not include any new samples. Instead, it contains the previous samples.

Could you please try the following steps and create a new sample-only pull request?

Steps to create a new pull request

Update master branch

1. Access the master branch of the forked repository (jaxkookie/List-Formatting)

2. Click the [Update Branch] button at the top of the page

3. Clicking [Update Branch] will apply the changes from the original repository to your forked repository

   

⚠️ If you do not see the [Update Branch] button or cannot successfully update or sync, please let me know in the comments.

Open GitHub Codespaces (Editor)

1. Access the master branch of the forked repository (jaxkookie/List-Formatting)

2. Press [.] on the keyboard

3. A web-based code editor called GitHub Codespaces will open

4. Make sure master is written in the lower left corner and the master branch is open

   

⚠️ If you do not use GitHub Codespaces, you can use Visual Studio Code or any other editor. In that case, however, you will need to clone the file.

Create Branch

1. Click on the branch name (master) shown in the lower left corner

2. Click [Create new blanch]

3. Type in any branch name

4. Press [Enter] key

5. Click [Switch to Branch]

   

6. Confirm that the branch name in the lower left corner is the branch name you typed in

   

Add or change files

Add new sample files or make changes to existing ones.

1. Add or change files (add new sample files)

Review and commit changes

1. Click on the Source Control icon in the menu on the left

2. Files that have been changed will be displayed, so confirm the changes

3. If you are comfortable with the changes you have made, type in a comment about what changes you have made

4. Click [Commit and push]

5. Changes are committed to the current branch

   

Create a pull request

1. Open the List Formatting repository

2. You will see a yellow message, click [Compare & pull request]

   

3. Make sure that the branch you created is set to merge into the master branch of List Formatting

4. Fill in Title and Description

5. Click [Create pull request]

   

⚠️ There is Japanese in some images in places. And the English translation of the Japanese may be incorrect. Sorry🙇‍♂️

[tecchan1107]

The following video also shows the pull request steps!
YouTube: How to submit your projects on GitHub

[tecchan1107]

Thank you for the update @jaxkookie !
Please let me know in the comments when you are done updating and ready to merge!