{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":13812,"path":"employee-service-management/workplace-core/card-configuration-examples.md","title":"Card Configuration examples","bundle":null,"doc_type":null,"release":"australia","body":"\n# Card Configuration examples\n\nAdd buttons, fields, and sections to the workplace card configuration.\n\n**Note:** The following examples are to customize the card configurations in Workplace Core. For more information about configuring the cards, see [Configure a workplace card](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/workplace-core/configure-workplace-card.md).\n\n## Customizing the card style\n\nNavigate to **All** > **Service Portal** > **CSS**, then customize the `wsdConfigurableCard` record based on your preference. You can override the styles based on the type of card you want to customize. For example:\n\n```css\n/* Customizing the profile image size for the user card */\n.wsdConfigurableUserCard {\n .profile-image {\n width: 100px;\n height: 100px;\n border-radius: 35px;\n }\n}\n\n```\n\n## Adding a section\n\nIn the template \\(macro\\) XML code, add a `
` element where you want to create a section, then include other elements inside the `
`. For example:\n\n```xml\n\n
\n
\n
{{ translations.space.supportSectionTitle }}
\n
\n \n \n {{ data.phone }}\n \n
\n\n \n
\n\n \n
\n
\n
{{ translations.space.bookServicesSectionTitle }}
\n
\n \n \n {{ data.link }}\n \n
\n```\n\n## Adding a button\n\nAdd the logic for the button in the `WSDConfigurableCardDataInjector` script include. Make sure to add the logic inside the `extendCardsData` method. For example:\n\n```javascript\n/* Adding functionality for a custom button */\nextendCardsData: function(cards) {\n cards.forEach(function(card) {\n if (card.type === 'space') {\n card.data.actions.secondary.push({\n label: 'Custom Action',\n id: 'custom_action',\n action: 'custom_action',\n isDisabled: false,\n type: 'secondary'\n });\n }\n }\n});\n```\n\n**Note:** Buttons are displayed in the `Primary action buttons` section of the card.\n\n## Adding a field\n\nIn the template \\(macro\\) XML code, add a `
` element in the section that requires a new field.\n\nYou can then add the logic to populate the field value in the `WSDConfigurableCardDataInjector` script include. For example:\n\n```xml\n\n
\n
\n\n
\n
{{ data.usable_size_sq_meter }}m square
\n
\n```\n\n```javascript\n/* Custom logic to populate the field value */\ncards.forEach( function(card) {\n if (card.type ==='space') {\n var spaceGr.get(card.data.sysId)) {\n card.data.usable_size_sq_meter = spaceGr.getValue('usable_size_sq_meter');\n }\n }\n});\n```\n\n## Adding a redirect button\n\nYou can add redirection buttons \\(e.g. to a KB article or external portal\\) on WSD location cards using the `action == 'redirect'` and a URL. You can use the target attribute to open the link in the same tab or a new tab.\n\n```javascript\ncards.forEach(function(card) {\n if (card.type === 'space') {\n // Internal KB article (same tab)\n card.data.actions.secondary.push({\n label: 'Custom Action',\n id: 'custom_action',\n action: 'custom_action',\n label: gs.getMessage('Workplace guidelines'),\n id: 'kb_guidelines',\n action: 'redirect',\n url: '/kb?id=kb_article_view&sysparm_article=KB0012345',\n isDisabled: false,\n type: 'secondary'\n });\n // External portal (new tab)\n card.data.actions.secondary.push({\n label: gs.getMessage('Catering portal'),\n id: 'catering_portal',\n action: 'redirect',\n url: 'https://catering.example.com/order',\n target: '_blank',\n isDisabled: false,\n type: 'secondary'\n });\n }\n});\n```\n\n## Adding custom logic for a card\n\nYou can add custom logic for a card in the `WSDConfigurableCardDataInjector` script include.\n\nIn the `extendCardsData` method, add the custom logic to provide data for the new section to the card. For example, to modify the card title based on a building name:\n\n```javascript\nextendCardsData: function(cards) {\n /* Modify card title based on the building display name */\n cards.forEach(function(card) {\n if (card.data.building && card.data.building.displayValue === 'HQ') {\n card.data.title = '[HQ] ' + card.data.title;\n }\n });\n return cards;\n},\n```\n\n## Hiding an element\n\nIn the template \\(macro\\) XML code, delete the XML tag for the section that you want to remove, or surround it in a comment block. For example:\n\n```xml\n\n\n```\n\nAfter hiding the element, make sure that you remove the custom logic, or surround it in a comment block. For example:\n\n```javascript\n/* The following method is in a comment block, therefore is not run on the card */\n/* cards.forEach( function(card) {\n if (card.type ==='space') {\n var spaceGr.get(card.data.sysId)) {\n card.data.usable_size_sq_meter = spaceGr.getValue('usable_size_sq_meter');\n }\n }\n}); */\n```\n\n**Parent Topic:**[Workplace Core references](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/workplace-core/wsd-references.md)\n\n**Related topics** \n\n\n[Components installed with Workplace Core]()\n\n[Properties installed with Workplace Core]()\n\n[Workplace Profile Location Assignment form]()\n\n[Workplace location assignment anomaly types]()\n\n[Reserve a space form]()\n\n"}}