Does anyone have any tips on implementing cards/tiles in Service Portal?

parmvirchahal
Kilo Contributor

‎10-24-2019 09:01 AM

I have been trying to implement a cards/tiles based UI in my application's portal quite a few different ways, without much luck. As such, I am now hoping that the community might have some tips for me!

I am looking to implement a card/tile similar to the ones shown in the following images:

find_real_file.png

find_real_file.png

I have been referencing the following web pages in my attempts to implement this UI:

1. http://designsystem.servicenow.com/#!/components/cards

2. https://sc.service-now.com/snds?state=widget-detail&sys_id=bf89d24913eb3e002ea1b2566144b090

At this point, I am not sure what I am missing. If I try to implement the cards/tiles as they have been in those web pages, they do not work. As an example, if I take the approach that was taken in the first link above, my portal only shows the text that was on the card, rather than the text formatted within the card. As such, is this an issue with my environment? Am I missing CSS, client-side scripts, or server-side scripts? If anyone has any advice/direction, I would really appreciate it!

Preview file
24 KB
Preview file
23 KB
0 Helpfuls
  • 1,325 Views
2 REPLIES 2

DrewW
Mega Sage
Mega Sage

‎10-24-2019 10:36 AM

Since you did not post any of your code about all I can suggest is that you should design your page without any scripting, just static cards and data.  Once you get it displaying the way you want then cut it up and add the needed code to make it dynamic.

 

Community Alums
Not applicable

‎10-24-2019 10:38 AM

I think I know what's going on, it's missing the libraries -actually it is quite strange why this procedure is not well documented tho.

You need to create a dependency on the widget to load the CSS on page load. 

CSS used by designsystem:

  • http://designsystem.servicenow.com/dist/css/nowdsgn-import.css
  • http://designsystem.servicenow.com/dist/css/nowdsgn-library.css