Ui Page

naresh121
Tera Contributor

‎07-16-2024 06:27 PM - edited ‎07-16-2024 06:37 PM

on Incident table, need to create an UI action named 'collect details' which would be visible only when  incident state is In progress. Upon clicking collect details button need to show a popup (UI page) which will have 2 radio buttons i.e. Comments and Replace 

  • Upon clicking on Comments, a comment box appears and users can click on submit 
  • Upon clicking on Replace , a notes appears and users can click on submit

how to achieve this, can any one help

0 Helpfuls
  • 269 Views
1 REPLY 1

Nguyen Duong1
Tera Contributor

‎07-16-2024 07:04 PM

Setting this up is a bit of a hassle, but here's how you can do it:

  1. Create the UI Action:

    • Go to System Definition > UI Actions and make a new one.
    • Set the Table to Incident and make sure it only shows when the incident state is "In Progress" (e.g., current.state == 2 for "In Progress").
    • Use this script for the UI Action:
      • action.setRedirectURL(current);
        popupOpen('/collect_details.do?sys_id=' + current.sys_id);

  2. Create the UI Page:

    • Go to System UI > UI Pages and create a new UI Page named collect_details.
    • Add HTML and Jelly code to create the popup with radio buttons and appropriate fields.

    Here’s a ''basic'' structure:

    1. <jelly>
      <html>
      <head>
      <title>Collect Details</title>
      </head>
      <body>
      <form>
      <label><input type="radio" name="detailOption" value="comments" onclick="showCommentsBox()"> Comments</label>
      <label><input type="radio" name="detailOption" value="replace" onclick="showReplaceBox()"> Replace</label>
      <div id="commentsBox" style="display:none;">
      <textarea name="comments" placeholder="Enter your comments"></textarea>
      </div>
      <div id="replaceBox" style="display:none;">
      <textarea name="replace" placeholder="Enter your notes"></textarea>
      </div>
      <button type="submit">Submit</button>
      </form>
      <script>
      function showCommentsBox() {
      document.getElementById('commentsBox').style.display = 'block';
      document.getElementById('replaceBox').style.display = 'none';
      }
      function showReplaceBox() {
      document.getElementById('commentsBox').style.display = 'none';
      document.getElementById('replaceBox').style.display = 'block';
      }
      </script>
      </body>
      </html>
      </jelly>

       

  3. Submit Handler:

    • You’ll need a UI Script or Business Rule to handle the form submission, capture the input, and update the incident record accordingly.

It's a bit of a pain to set all this up, but that's the way to do it.

0 Helpfuls