Can I add a field to the VTB card details popup?

[Jerry Volpe]

Hello community!

One of our users has asked if we can config the card details popup on VTB's to add an additional field.   Specifically I'm talking about the popup shown here:
https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/use/visual-task-boards/task/t_E...

I know that I can change the form layout on the VTB form view, but that only pops up on the VTB if I click the task number, not just by clicking the VTB card itself.

Thanks for any guidance,
Jerry

[Chris K]

Appreciate the detailed information, but we should really be able to add a custom field to this form.  

[jayw]

Hi jerryvolpe,

I recently had a user request some additions to the VTB Details Card, and while the actual template is certainly locked down, I was able to come up with a bit of a hackey workaround using serviceportal, jQuery, and an iframe. This approach would require a developer with at least a passing familiarity with jQuery, since that is what we will use to add our custom content to the form, and it would also require being comfortable knowing that this is a bit of a hack haha and it would require updating if the class names were to change on the $vtb.do page. This was really just a proof of concept, and I would generally not advocate that you use jQuery within angular components and if I implement a more long term solution for the requestor, I would investigate the possibility of using the link function to compile the new html into the iframe to make it truly scope-bound and do things the angular way.

Here are my steps to building the proof of concept (there is obviously a bit of cleaning up that could be done here in the name of best practices, like listening for iframe load events or using an interval in step 3 instead of relying on $timeouts, this was just a quick demo as i mentioned):

1a) Create a simple serviceportal Portal and add the following css to the CSS Variables field of your portal;

.container {width: 100% !important;}

1b) Once you've done that, create a simple portal homepage for that portal with one container/column.

2) Create a simple VTB wrapper widget that will iframe the $vtb.do page. You will need the sysparm_board id, which you can find in the url of the VTB board in question:

<!--   widget html -->
<
div style="height:1200px;overflow:hidden;">
   <iframe src="{{c.data.vtbConfig.board_url}}" height="100%" width="100%" id="vtb-iframe"></iframe>
</div>

// widget server script

data.vtbConfig = {
       sysparm_board:'21b917e6135656000accd6466144b090'
};
data.vtbConfig.board_url = '/$vtb.do?sysparm_board=' + data.vtbConfig.sysparm_board;

3) We are going to add a click listener to each card. The listener will listen for a card to be clicked on, and once clicked it will wait 300 ms to make sure the modal is open, and then it will add a "Super-Custom Button" to the page which alerts the user when clicked (again, proof of concept).

// widget controller code
function($timeout) {
       var c = this;
       var superCustomButton = '<button class="icon-stream-all-input btn-default btn vtb-toggle-inputs ng-scope" style="margin-right:12px;" onclick="alert(\'Hello World! Have some sweet custom functionality!\');"><div style="display:inline-block;margin-left:10px">Super-Custom Button</div></button>';

       // need to wait for iframe to load so we can add click listeners to the cards; can't add if cards don't exist yet
       // once card is clicked, wait 300 milliseconds for modal to open because, again, can't add buttons to something that doesn't exist yet
       // *note: would be better to convert outer $timeout to interval or event listener since iframe may take more or less than 3 seconds to load; 

       $timeout(function(){
               var iframe = $('#vtb-iframe').contents();
               iframe.find('.vtb-card').click(function(e){
                       $timeout(function(){
                               iframe.find('.sn-controls > div').prepend(superCustomButton);
                       },300);
               });
       },3000);
}

4) This is obviously the most basic example possible. If you were going to add other form fields from the card you are viewing, you would have to do some queries to the table API to get the relevant data from the 'rm_stories' table (since the cards correspond to records in that table), and you would have to use jQuery to add that to the page. If you need to post data from that card popup, you get a little hackier even, as you would likely have to create your own form handler, which would end up being a decent amount of low level development work. And again, this is super-duper hacky and you should always stick to the frameworks provided by the platform when possible, as these kinds of hacks may be disrupted by future upgrades, but this does allow you to modify templates that you wouldn't otherwise be able to modify (not just VTB, this concept could technically be applied anywhere), and it allows you to do so in a very non-destructive way, with the original VTB form intact (the custom functionality would only be visible from the service portal). Hopefully I don't get flamed to hard for promoting a hacky jQuery workaround haha, I just thought it was an interesting challenge.

Cheers,

[Jerry Volpe]

Thanks a lot jayw for following up on this one.   Certainly an interesting idea - while I'm not a developer who would be able to do this, I'm going to pass this by my team of skilled developers - I think they be intrigued by the idea of where this could go.

[Eric M]

yeah, this really is a down fall that you can't config vtb_card_details form. I think is a bad user experience to make them click Ptsk to change a few fields 

[YuvrajS90374537]

Hey @Jerry Volpe , I suppose I know just the thing you are looking for -> VTB PopUp Card Details .
This is the KB article which tells about a sys_property to which we can add different table fields which we want to show in the VTB Popup Card window.

In my case i used "Story" table in my VTB.

Do mark it as helpful if it works for you.
Thanks.