Integrieren Sie Jira-Issue-Collector in Themenbuttons

Community-Wiki Administratoren
1

Hallo :wave:

Ich habe heute begonnen, Issue-Collector in unserem Forum zu implementieren, und möchte die super einfache Theme-Komponente teilen, die ich erstellt habe.

Am Ende wird es so aussehen.


Was Sie benötigen

  • Ein Jira Issue Collector
  • Einige JS-Kenntnisse

Die Issue-Collector-ID abrufen

Damit der Collector funktioniert, benötigen wir seine ID.

1465×318 23.3 KB

Gehen Sie zu Ihrem gewünschten Issue Collector und kopieren Sie den Parameter collectorId aus der URL:

https://tosdr.atlassian.net/secure/ViewCollector!default.jspa?projectKey=BE&collectorId=176cb88e

In meinem Fall ist es 176cb88e.

Erstellen Sie eine neue Theme-Komponente

und verwenden Sie den folgenden Code im Abschnitt <head>.

Ersetzen Sie die folgenden Schlüssel durch ihre entsprechenden Werte:

  • MY_COLLECTOR_ID → 176cb88e
  • REPLACE_ME_AJAX → Die Skriptquelle aus dem Abschnitt „Einbetten dieses Issue Collectors" → „In JavaScript einbetten" Ihres Jira Issue Collectors
    639×443 16.3 KB
  • MY_PROJECT_KEY → Mit dem Projektschlüssel Ihres Issue Collectors, falls Sie mehrere Issue Collector einfügen möchten.
<script type="text/discourse-plugin" version="0.8">
api.decorateCooked(() => {
    window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
        'MY_COLLECTOR_ID': {
            "triggerFunction": function(showCollectorDialog) {
                jQuery(document).on('click', "[data-wrap='jira-bug-MY_PROJECT_KEY'] > p", function(e) {
                    e.preventDefault();
                    showCollectorDialog();
                });
            }
        }
    });
});
</script>
<script>
$(document).ready(function() {
    jQuery.ajax({
        url: "REPLACE_ME_AJAX",
        type: "get",
        cache: true,
        dataType: "script"
    });
});
</script>

Ich habe nur 2 CSS-Buttons für meine Bedürfnisse erstellt; Sie können gerne weitere hinzufügen.

[data-wrap*="jira-bug-"] {
    p {
        border-radius: 2em;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0.53em 0.8em;
        border: none;
        font-weight: normal;
        margin: 1px;
        font-size: var(--font-0);
        line-height: normal;
        color: var(--primary-low);
        background: var(--danger);
        cursor: pointer;
        transition: all 0.25s;
    }
    p:hover {
        color: #000;
        background: #fff;
        border-color: #0060df;
    }
}

[data-wrap*="jira-feature"] {
    p {
        border-radius: 2em;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0.53em 0.8em;
        border: none;
        margin: 1px;
        font-weight: normal;
        font-size: var(--font-0);
        line-height: normal;
        color: var(--secondary-low);
        background: var(--success-medium);
        cursor: pointer;
        transition: all 0.25s;
    }
    p:hover {
        color: #000;
        background: #fff;
        border-color: #0060df;
    }
}

Nun zum Einbetten des Issue Collectors in Beiträge:

[wrap=jira-bug-MY_PROJECT_KEY]
:bug: Einen Fehler melden
[/wrap]


[wrap=jira-feature-MY_PROJECT_KEY]
:bulb: Eine Funktion vorschlagen
[/wrap]

Das war’s! Jetzt haben Sie einen funktionierenden Issue Collector als Button in Ihrem Beitrag!

3 „Gefällt mir“
Administrators Index