Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The resulting Visualforce section will only show issues associated using the Remote System Reference method.

Warning
title

Does the Related JIRA Issues section appear blank?

There is an issue regarding newer browsers which may render the Related Jira Issues section blank.

If you encounter this problem, consult this Knowledge Base article: Related Jira Issues May Appear Blank.

...

In some situations it would be useful to view the associated Jira issues for a particular Salesforce object from inside Salesforce itself. Using a concept in Salesforce called Visualforce pages, we can add a new section onto the object's page layout that displays these associated Jira issues. The high level steps are:

  1. Creating a Visualforce section.

  2. Adding the Visualforce section to the Object's Page Layout page.
     

Info

To avoid issues with empty Salesforce-Jira Search Results:

  1. Please make sure cookies are enabled.

  2. Please make sure that you are logged in to Jira with the Remember my log in on this computer option checked on the log in page.

Visualforce pages require some markup to be added and as such they can be flexible. For our purposes we will keep it simple. The markup we will use follows the format:

...

Creating a new Visualforce page

Lightning Experience

  1. You will need to get the correct Jira URL first by copying the URL from the "Fetch" Endpoint and replacing the bolded section of the URL with the correct syntax for your object.
     

  2. Go to  > Setup.

...


  1. Image Added



  2. Search for "Visualforce Pages" then click on the Visualforce Pages menu item.

...


  1. Image Added



  2. Click the New button to create a new Visualforce page for Jira issues.

...


  1. Image Added
  2. A form will appear for you to enter details of the new Visualforce page.

    You can name it anything you wish. Add in the Visualforce markup from above

    For example:

    Code Block
    <apex:page standardController="<SALESFORCE_OBJECT_NAME>">
    <apex:iframe id="JiraWindow" src="<Jira_FETCH_URL>"></apex:iframe> 
    </apex:page>


  3. A form will appear for you to enter details of the new Visualforce page.
    You can name it anything you wish. Add in the Visualforce markup from above
    For example:


  4. Click Save.

...


  1. Image Added

Adding a Related Issues Section to the Layout

  1. Now search for "Object Manager" then click on the Object Manager menu item.

...


  1. Image Added



  2. Choose the object that you want to create a button in.
    In our example, we will use Case.

...


  1. Image Added



  2. Now look for Case Page Layouts and click it.

...


  1. Image Added



  2. A list of page layouts for the object will be listed.
    In this example, we want to modify the default Case page layout, which is called Case Layout.
    Go to the pull down menu and choose Edit.

...


  1. Image Added
  2. An interactive editor will appear for the object page layout.
    At the top will be a section of the items you can add to your layout, at the bottom is the page layout where you can drag and drop the item to.
    We want to add our new section for displaying Jira issues at the bottom of the Case Detail area.
    The Fields area should already be open in the top area.
    If not, click on it.

...


  1. Image Added



  2. Drag and drop the Section item from the top section down to the bottom of the Case Detail area.
    A green tick will appear if you have dragged it to a permitted area, a cross if you haven't.
    You may need to hold and scroll the page down a bit to get to the end of the Case Detail area.

...


  1. Image Added



    Once you have let go, you will see a Section Properties pop-up:

...


  1. Image Added
  2. Give the section a name (we have called it "Related Jira Issues") and select 1-Column for the Layout.
    Click OK.
     

  3. We now have to move the Visualforce page for the related issues into this section.
    Back in the top section, click Visualforce Pages.

...


  1. Image Added



  2. In our example you can see the Visualforce page we created in the previous section, JiraIssues.
    Drag and drop this on top of the section we just created.
    Again, you may need to hold and scroll down the page to get to it.

...


  1. Image Added
  2. After dropping, the Related Jira Issues section will look like the following with your Visualforce page name:

...


  1. Image Added



  2. Click Save.

...


  1. Image Added



  2. To verify the section was added successfully, go to a Salesforce object page of an object you know has Jira issues linked.
    There should now be a Related Jira Issues window under the Case Details and the linked issues listed inside.

...


  1. Image Added


Salesforce Classic

  1. You will need to get the correct Jira URL first by copying the URL from the "Fetch" Endpoint and replacing the bolded section of the URL with the correct syntax for your object.
     

  2. Go to Salesforce and log in as an administrator and click on Setup.

...


  1. Image Added


     

  2. Expand the Develop menu under the Build section of the left hand menu.
    Find the Visualforce Pages link under this and click.

...


  1. Image Added



  2. Click the New button to create a new Visualforce page for Jira issues.

...


  1. Image Added



  2. A form will appear for you to enter details of the new Visualforce page.
    You can name it anything you wish. Add in the Visualforce markup from above
    For example:

    Code Block
    <apex:page standardController="<SALESFORCE_OBJECT_NAME>">
    <apex:iframe id="JiraWindow" src="<Jira_FETCH_URL>"></apex:iframe> 
    </apex:page>


  3. Click Save.

...


  1. Image Added


Adding a Related Issues Section to the Layout

  1. Now expand the Customize menu under the Build section of the left hand menu.
     

  2. Expand the object that you want to add the related issues section to.
    In this example, we are using Cases.
     

  3. Find the Page Layouts link and click on it.

...


  1. Image Added



  2. A listing of page layouts will be shown. In this example, we want to modify the default Case page layout, which is called "Case Layout".
    Click on the Edit link under the Actions column of the layout.

...


  1. Image Added



  2. An interactive editor will appear for the object page layout.
    At the top will be a section of the items you can add to your layout, at the bottom is the page layout where you can drag and drop the item to.
    We want to add our new section for displaying Jira issues at the bottom of the Case Detail area.
    The Fields area should already be open in the top area.
    If not, click on it.

...


  1. Image Added



  2. Drag and drop the Section item from the top section down to the bottom of the Case Detail area.
    A green tick will appear if you have dragged it to a permitted area, a cross if you haven't.
    You may need to hold and scroll the page down a bit to get to the end of the Case Detail area.

...


  1. Image Added



    Once you have let go, you will see a Section Properties pop-up:

...


  1. Image Added
  2. Give the section a name (we have called it "Related Jira Issues") and select 1-Column for the Layout.
    Click OK.
     

  3. We now have to move the Visualforce page for the related issues into this section.
    Back in the top section, click Visualforce Pages.

...


  1. Image Added



  2. In our example you can see the Visualforce page we created in the previous section, JiraIssues.
    Drag and drop this on top of the section we just created.
    Again, you may need to hold and scroll down the page to get to it.

...


  1. Image Added



    After dropping, the Related Jira Issues section will look like the following with your Visualforce page name:

...


  1. Image Added



  2. Click Save.

...


  1. Image Added



  2. To verify the section was added successfully, go to a Salesforce object page of an object you know has Jira issues linked.
    There should now be a Related Jira Issues window under the Case Details and the linked issues listed inside.

...


  1. Image Added