JSON Hyperlink Button - Font change

Copper Contributor

Hi all, 

 

Hoping someone can spot my last issue here.  I have a hyperlink field in a SharePoint list.  If the associated row's task has a MS Form, we put the hyperlink to the form in this FormURL field. 

 

I have a second column called "FormExist" that is a choice field with yes or no. 

 

The button does not display unless the FormExist is set to Yes. 

 

For some reason, the button funked up the font to Times and the icon in the button is difficult to see and not like our other buttons. 

 

Current JSON coding: 

 

 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "=if([$FormExist] != 'Yes' , 'none' , 'flex')",
        "flex-direction": "row"
      },
      "children": [
        {
          "elmType": "a",
          "style": {
            "width": "110px",
            "height": "34px",
            "border": "double",
            "text-decoration": "none", 
            "border-radius": "10px",
            "cursor": "pointer",
            "align-items": "center",
            "justify-content": "space-evenly",
            "margin": "0px"
          },
          "txtContent": "Form",
          "attributes": {
            "href": "@currentField",
            "target": "_blank",
            "class": "ms-bgColor-sharedCyan10 ms-bgColor-sharedCyan20--hover ms-fontColor-white ms-fontSize-18 ms-fontWeight-bold",
            "iconName": "OfficeFormsLogoInverse" 
          },
          "children": [
            {
              "elmType": "div",
              "attributes": {
                "iconName": "OfficeFormsLogoInverse16"
              }
            }
          ]
        }
      ]
    }
  ]
}

 

 

 

I had tried to add a font-family in the style around line 18 and also tried after class in line 29, but it does not change it. Editing to add: When I add font-family the icon doesn't work and becomes the blank box. 

 

(Also, I realize there was probably easier code that wouldn't need me FormExist field, so it would only show the button if a hyperlink was in the FormURL field. If there was no link populated, no button but I couldn't figure that out.)

 

2nd wish, but not as important - is there any way to sub out the Class ms-bgColor for hex codes for the button and hover? I originally had hex in the style with no hover effect, but wanted a hover effect so this was how I found to do it. 

 

I am trying to have it show with the OfficeFormsLogoInverse icon (or any icon really) and not be jammed into left justify.  I am perplexed.  Can anyone assist? 

 

Button displays: 

 

FSomers_0-1674699037327.png

 

How the Form button should look similar to: 

FSomers_1-1674699138949.png

Thanks in advance! 

0 Replies