Steps to Reproduce
- Create a new UI Macro.
- Add <table></table> to the template. For example:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
- Save and create a formatter out of this macro for the task table.
- Go to change_request.do and personalize the form.
- Add your formatter to the first section and save.
- After you are redirected back to the form, try to toggle tabs using the button on the upper right of the form.
- Try it on an existing change_request record as well. (Toggling tabs only works for the related list).
This behavior can be seen other forms as well, like sc_req_item.
Moving the formatter around produces some different behavior. Consider a form with 4 sections:
[Formatter in Section 0]
Sections 1-3 are outside the first <form> element. Toggle tabs button will not work on the only section because tabs2.js sees there is only 1 section in the <form> element.
[Formatter in Section 1]
Same behavior as above, but Sections 0,1 are in the <form> element. Toggle tabs shows the same behavior because tabs2.js only sees 2 sections and tabs do not work for just 2 sections.
[Formatter in Section 2]
Tabs work for section 1,2 but Section 3 appears under the Section 2 tab.
[Formatter in Section 3]
Since it is the last section, toggle tabs performs as expected. This could be considered a workaround, but it imposes an arbitrary restriction on the customer and may not make sense depending on the contents of the formatter and which section is last.
After carefully considering the severity and frequency of the issue and the risk of attempting a fix, ServiceNow has decided to not address this issue in any current or future releases.
While there are cases where tables display correctly when using <tr></tr> and <td></td> container tags, the most reliable workaround is to replace the use of tables in formatter macros with nested <div> tags and the appropriate CSS styling to control the layout.
Related Problem: PRB590079