Hello Confluence Tutorial Success Thread

mpaisley · March 6, 2024, 5:44am

Share a screenshot of your completed Confluence Hello World tutorial to earn a Badge!

MarkusBormK15t · May 28, 2024, 12:28pm

my sreenshot

mpaisley · May 30, 2024, 1:49am

Nice work!

ArnoutCator · June 18, 2024, 8:40pm

my screenshot

mpaisley · June 24, 2024, 5:54am

nice work @ArnoutCator

SeanSweeney · July 18, 2024, 7:35pm

Success!

mpaisley · July 23, 2024, 7:55am

Nice work @SeanSweeney

HruduShibu · September 9, 2024, 7:18am

mpaisley · September 10, 2024, 1:03am

Nice job @HruduShibu

modzelewskil · October 4, 2024, 3:01pm

I did it too ^^ with slight modifications

Note: here in 4th point there is ‘service desk’ reference instead of Confluence: https://developer.atlassian.com/platform/forge/call-a-confluence-api/#make-an-api-call

TomCooper · October 9, 2024, 7:31pm

On my way…

ashwiniraghuwanshi · October 16, 2024, 12:11pm

my screenshot -

However while exporting I am not able to see the number of comments. It gives me as undefined. Did I missing something here ?

Rag · October 18, 2024, 3:44pm

Hi modzelewskil,
In my code, the PDF export is not working properly, could you please share the code that works?

modules:
  macro:
    - key: hello-world-app-wiki-hello-world-macro
      resource: main
      render: native
      resolver:
        function: resolver
      title: Forge app for Rag
      description: Inserts hello world!
      adfExport:
        function: export-key
  function:
    - key: resolver
      handler: index.handler
    - key: export-key
      handler: macroExport.exportFunction
resources:
  - key: main
    path: src/frontend/index.jsx
app:
  runtime:
    name: nodejs20.x
  id: ari:cloud:ecosystem::app/7789f1d5-33bb-49a9-a2f0-095be1ba46a1
permissions:
  scopes:
    - read:comment:confluence

import api, { route } from '@forge/api';
import { doc, p } from '@atlaskit/adf-utils/builders';

const fetchComments = async (pageId) => {
    const res = await api
        .asApp()
        .requestConfluence(route`/wiki/api/v2/pages/${pageId}/footer-comments`);
    const data = await res.json(); 
    return data.results;
};

export const exportFunction = async (payload) => {
    const pageId = payload.context.contentId;
    const comments = await fetchComments(pageId);

    return doc(
        p(`Number of comments on this page: ${comments.length}`),
        p(`Hello world! This is an export of type ${payload.exportType}.`)
    );
}

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Text, useProductContext } from '@forge/react';
import { invoke, requestConfluence } from '@forge/bridge';

const fetchCommentsForPage = async (pageId) => {
  const res = await requestConfluence(`/wiki/api/v2/pages/${pageId}/footer-comments`);
  const data = await res.json();
  return data.results;
};

const App = () => {
  const context = useProductContext();

  // const [data, setData] = useState(null);

  // add these code to keep track of footer comments
  const [comments, setComments] = React.useState();
  console.log(`Number of comments on this page: ${comments?.length}`);

  // useEffect(() => {
  //   invoke('getText', { example: 'my-invoke-variable' }).then(setData);
  // }, []);

  React.useEffect(() => {
    if (context) {
      // extract page ID from the context
      const pageId = context.extension.content.id;

      fetchCommentsForPage(pageId).then(setComments);
    }
  }, [context]);

  return (
    <>
      <Text>
        Number of comments on this page: {comments?.length}
      </Text>
      <Text>Hello world!</Text>
      {/* <Text>{data ? data : 'Loading...'}</Text> */}
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);