Hi I am using Atlassian Connect Express. I want to pass data from index.js to hello-world.jsx.
This is my index.js file:
export default function routes(app, addon) {
// Redirect root path to /atlassian-connect.json,
// which will be served by atlassian-connect-express.
app.get('/', (req, res) => {
res.redirect('/atlassian-connect.json');
});
// This is an example route used by "generalPages" module (see atlassian-connect.json).
// Verify that the incoming request is authenticated with Atlassian Connect.
app.get('/hello-world', addon.authenticate(), (req, res) => {
var hideAdminPanel = true; // I want to pass this data
// Rendering a template is easy; the render method takes two params: the name of the component or template file, and its props.
// Handlebars and jsx are both supported, but please note that jsx changes require `npm run watch-jsx` in order to be picked up by the server.
res.render(
'hello-world.jsx', // change this to 'hello-world.jsx' to use the Atlaskit & React version
{
title: 'Atlassian Connect'
, hideAdminPanel: hideAdminPanel // How do I access it inside hello-world.jsx file now
//, issueId: req.query['issueId']
//, browserOnly: true // you can set this to disable server-side rendering for react views
}
);
});
}
This is my hello-world.jsx file:
import React, { Fragment } from "react"
import ButtonGroup from "@atlaskit/button/button-group"
import LoadingButton from "@atlaskit/button/loading-button"
import Button from "@atlaskit/button/standard-button"
import TextField from "@atlaskit/textfield"
import Form, {
ErrorMessage,
Field,
FormFooter,
HelperMessage,
ValidMessage
} from "@atlaskit/form"
export default () => (
<div
style={{
display: "flex",
width: "400px",
maxWidth: "100%",
margin: "0 auto",
flexDirection: "column"
}}
>
<Form
onSubmit={data => {
console.log("form data", data)
return new Promise(resolve => setTimeout(resolve, 2000)).then(() =>
data.username === "error" ? { username: "IN_USE" } : undefined
)
}}
>
{({ formProps, submitting }) => (
<form {...formProps}>
<Field
name="username"
label="User name"
isRequired
defaultValue="hello"
>
{({ fieldProps, error }) => (
<Fragment>
<TextField autoComplete="off" {...fieldProps} />
{!error && (
<HelperMessage>
You can use letters, numbers & periods.
</HelperMessage>
)}
{error && (
<ErrorMessage>
This user name is already in use, try another one.
</ErrorMessage>
)}
</Fragment>
)}
</Field>
{/* Dynamic Field */}
{/* I want to access that field below here, but I am unable to find a way to do so*/}
{hideAdminPanel ? null : (
<Field name="adminpanel" label="Admin panel field" isRequired defaultValue="">
{({ fieldProps, error }) => (
<Fragment>
<TextField autoComplete="off" {...fieldProps} />
{!error && (
<HelperMessage>
You can use letters, numbers & periods.
</HelperMessage>
)}
{error && (
<ErrorMessage>
This user name is already in use, try another one.
</ErrorMessage>
)}
</Fragment>
)}
</Field>
)}
{/* Dynamic Field */}
<FormFooter>
<ButtonGroup>
<Button appearance="subtle">Cancel</Button>
<LoadingButton
type="submit"
appearance="primary"
isLoading={submitting}
>
Sign up
</LoadingButton>
</ButtonGroup>
</FormFooter>
</form>
)}
</Form>
</div>
)
How do I pass the property hideAdminPanel from index.js and access it inside hello-world.jsx ?
