Add Link directly in custom Form

Martin_FischerMartin_Fischer Member IT Monkey ✭
Is it possible top add an link to an external source directly in an custom form (for example indcident form). Just to show and be able to click (as aditional information)



Best Answers

  • Martin_FischerMartin_Fischer Member IT Monkey ✭
    Accepted Answer
    It works. Thanks!

Answers

  • Geoff_RossGeoff_Ross Cireson Consultant Super IT Monkey ✭✭✭✭✭
    Hi Martin,

    Yes but depends on what you need.

    Would the url differ from IR to IR? If you could extend the class to add a properly for the url and then use the URL type control to add this so the form, just like the one on the Vendor AM form (If you use CAM).

    If its a static URL for all IRs, the easiest way would be a custom task, but if you want it elsewhere on the form, some custom JS to place some extra html on the form would be the way to go.

    Geoff

  • Martin_FischerMartin_Fischer Member IT Monkey ✭
    Hi Geoff

    i need for the customer the second example, a static URL on an custom change request form. Elsewhere on the form. Is there anywhere an example of the custom JS?
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    @Martin_Fischer
    Depends on where you want it to show. E.g. this will place a link to community.cireson.com right below the heading on each tab:

    $('.tab-pane.active').find('.panel-heading:first').append('<br/><a href="https://community.cireson.com">Cireson Monkeys</a>')


    As so:



  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    edited June 2017
    Oh sorry, I missed that you needed an example to the whole custom.js. That would look like this:

    app.custom.formTasks.add('ChangeRequest', null, function (formObj, viewModel) {
       //bind a function to the form ready event
      formObj.boundReady(function () {
       
        if (session.user.Analyst) { // Remove this line, to show to end users also
          $('.tab-pane.active').find('.panel-heading:first').append('<br/><a href="https://community.cireson.com">Cireson Monkeys</a>')
        } // Remove this line too, to show to end users also
      });

      return;
    });


    This will show the link on CRs only for analysts. Remove line 5 and 7, to show the link to all users, incl. end users.

    If you need this for other classes than change request, simply change 'ChangeRequest' in line 1 to e.g. 'ServiceRequest' or any other class you need.
  • Martin_FischerMartin_Fischer Member IT Monkey ✭
    Sounds good. I test it.
    THANKS!!
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    @Martin_Fischer
    Oh sorry, there's a mistake on line 5
    if (!session.user.Analyst) {
    The ! should be removed, if you only want the link to be shown to analysts, so it says
    if (session.user.Analyst) {
    instead. For end users the same still applies: You need to remove line 5 and 7, if end users needs to see the link too. I edited the original post to reflect this.
  • Martin_FischerMartin_Fischer Member IT Monkey ✭
    Accepted Answer
    It works. Thanks!
  • Martin_FischerMartin_Fischer Member IT Monkey ✭
    One additional question. Is it alwys possible to set an Link like this direct in the Form. (not only on the Tab)
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    @Martin_Fischer
    Sure, you just append it to the element where you want it displayed. Do you have somewhere specific in mind?
  • Martin_FischerMartin_Fischer Member IT Monkey ✭
    The customer have an custom Field (additional Dropdown field in the class ChangeRequest).
    Is it an change on this part of your example?
    $('.tab-pane.active').find('.panel-heading:first').
    Where i can get examples / descrition for it?
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    Yeah, it's that part of the code.

    You can find the class for the custom field by using the DevTool in your browser (F12) - use the inspector to find the field, where you want the link to be under and use the class $(".CLASS_HERE") or id $("#ID_HERE) instead of the part you posted.
  • Martin_FischerMartin_Fischer Member IT Monkey ✭
    It works, thanks.
    You using .panel-heading:first. How i can get on the second or third panel for example?
    I have more than one class col-md-4 for example and did not find an ID.

  • Martin_FischerMartin_Fischer Member IT Monkey ✭
    Perfect, thanks a lot. That worls both.
  • Kenneth_AndersenKenneth_Andersen Customer IT Monkey ✭
    Hi.
    I have a custom field populated to the change request form on the portal.
    The field is used to have the number from our Agile development enviroment. But since our Agile is webbased, I will like to make a enternal link direct from the input data. 
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    Hi @Kenneth_Andersen
    You can get the value from the field by using $('.control-label[for="CustomField"]').next().val() and use the value to create your link.
  • Kenneth_AndersenKenneth_Andersen Customer IT Monkey ✭
    Thnaks..
    But i dont have all the information regarding the link in the field.
    If the value is "STRY001234" then the link need to be "http://agile.com/STRY1234" - how to repopolate static data in the link ?
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    edited June 2017
    I'm guessing you don't want to replace the content of the field with an URL, as that would replace the actual value of the field on the CR, so I would do something like this:
    app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {
       //bind a function to the form ready event
      formObj.boundReady(function () {

        var customField = $('.control-label[for="CustomField"]').next();
        var value = customField.val();
        if(value != "") {
          var link = 'http://agivel.com/' + value
          customField.replaceWith('<a href="' + link + '">' + link + '</a>');
        }

      });

      return;
    });
    Which will yield this result (if the field is populatet - if not, it just shows the text box):



Sign In or Register to comment.