Skip to main content
BOOK A DEMO

Search

How to maintain custom formatting of choice opinions or how can I accomplish this in All modes of the form

Maria Giugno
  • Discussion Created

When High is selected green choice pill

When Medium is selected yellow (gold) choice pill

When Low is selected red choice pill

 

0

Comments

5 comments

Date Votes
  • Official comment
    skybow Support

    Hi Maria Giugno,

    we do support view and column formatting for sublists/libraries on Display Forms only. When adding lists on New- or EditForms we do not support it so far.

    Kind regards

    skybow Support

  • Maria Giugno

    How would I achieve this on the Display form for the choice drop-down options? Thank you!

    0
  • Maria Giugno
    • Edited

    Can anyone assist me with achieving the choice pill styling for the choice column in Display mode? Thank you!

    1
  • Christof
    • Edited

    Hi Maria Giugno,
    the column formatting will not be applied to the field values on Display forms customized by skybow.
    But you can achieve the same effect by using the Styling functionality on the form and use nearly the same styles as in the column formatting.

    Result:

     

    Therefore I just read out the styles from my formatted column with the browser's Dev Tool (press F12):

     

    Create new a new style per choice value and set its condition to check the value like this:

     

    Use the copied styles and paste it into the new created Styles:

    .sb-field-value {
      color: #FFFFFF;
      background-color: #D13438;
      border-radius: 16px;
      padding: 1px 8px 2px 8px;
      display: inline;
    }
    div.sb-field > div {
      margin-top: 6px;
    }


    Hope these steps helps :)

    0
  • Joerg_K.
    • Edited

    I am trying to get an icon displayed instead of the text. As I want to have different icons be displayed I would need to use a Rule/Condition to determine which icon should be displayed based on the text value. However, I am not able to find a way to display FabricMDL2Icons within CSS.

    At the list view I can use the SharePoint JSON list formatting to get this done for the field by using the below JSON, as this works it is indicating to me that the Fluent UI is available at SharePoint:

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "div",
      "attributes": {
        "iconName": "=if(@currentField == 'App Catalog Site', 'DocumentSet', if(@currentField == 'Communication Site', 'ChatInviteFriend', if(@currentField == 'Document Center', 'DocumentSet', if(@currentField == 'Private Channel (Microsoft Teams)', 'TeamsLogo16', if(@currentField == 'Project Web App Site', 'ProjectLogo16', if(@currentField == 'Review Center', 'DocumentSet', if(@currentField == 'Team Site (classic experience) (STS#0)', 'Sharepoint2013LogoInverse', if(@currentField == 'Team Site (Microsoft 365) (GROUP#0)', 'TeamsLogo16', if(@currentField == 'Team Site (STS#3)', 'SharepointAppIcon16', if(@currentField == 'Shared and Private Channel (TEAMCHANNEL#1)', 'TeamsLogo16', if(@currentField == 'Private Channel (TEAMCHANNEL#0)', 'TeamsLogo16', if(@currentField == 'Undefined SiteType', 'SurveyQuestions','Unknown'))))))))))))"
      },
      "style": {
        "font-size": "20px",
        "color": "=if(@currentField == 'App Catalog Site', '#40587C', if(@currentField == 'Communication Site', '#407855', if(@currentField == 'Document Center', '#40587C', if(@currentField == 'Private Channel (Microsoft Teams)', '#4052AB', if(@currentField == 'Project Web App Site', '#FF9900', if(@currentField == 'Review Center', '#40587C', if(@currentField == 'Team Site (classic experience) (STS#0)', '#038387', if(@currentField == 'Team Site (Microsoft 365) (GROUP#0)', '#4052AB', if(@currentField == 'Team Site (STS#3)', '#038387', if(@currentField == 'Shared and Private Channel (TEAMCHANNEL#1)', '#4052AB', if(@currentField == 'Private Channel (TEAMCHANNEL#0)', '#4052AB', if(@currentField == 'Undefined SiteType', '#0066FF','#000000'))))))))))))"
      }
    }

    But when switching to an item "disp.aspx" I tried to customize the form and use this CSS at the Style option in order to show an Icon:

    .sb-field-label {
      display: none;
    }

    .sb-field-value {
      visibility: hidden;
    }

    .sb-field-value::before {
      visibility: visible;
      content: "\F40A";
      font-family: FabricMDL2Icons;
      font-size: 64px;
      font-color: "#4052AB";
    }

    But I only get an rectangle showing that the font is not recognized. For the font family I also tried to use "fabric-icons" without success. Anything I am doing wrong?
    Any help appreciated.
    Many thanks in advance.
    Cheers
    Joerg

    0

Please sign in to leave a comment.