I want to redirect to a specific URL onSubmit of a Form. I tried various solutions but nothing worked for me. Can someone please help me with this.
Hi @AnjaliChaudhary ,
To redirect to a specific URL on submit, you’ll need to use a CustomUI navigate method.
Here is an example of the static
App.js
file with an upload file form.
I’ve installed this app in Confluence and the router.navigate('/wiki');
line navigates to the Confluence home page after the form has been submitted.
import React, { useState } from 'react';
import { router } from '@forge/bridge';
function App() {
const [selectedFile, setSelectedFile] = useState();
const [isSelected, setIsSelected] = useState(false);
const changeHandler = (event) => {
setSelectedFile(event.target.files[0]);
setIsSelected(true);
console.log(`changeHandler`);
};
// Handles form submission, which is a good place to call APIs, or to set component state...
const handleSubmission = () => {
console.log(`handleSubmission`);
router.navigate('/wiki');
}
return (
<div>
<input type="file" name="file" onChange={changeHandler} />
{isSelected ? (
<div>
<p>Filename: {selectedFile.name}</p>
<p>Filetype: {selectedFile.type}</p>
<p>Size in bytes2: {selectedFile.size}</p>
<p>
lastModifiedDate:{' '}
{selectedFile.lastModifiedDate.toLocaleDateString()}
</p>
</div>
) : (
<p>Select a file to show details</p>
)}
<div>
<button onClick={handleSubmission}>Submit</button>
</div>
</div>
);
}
export default App;
There is a tutorial here for getting started with a Custom UI app in Forge.
Cheers,
Caterina
Namaste @ccurti how can I achieve this in UI Kit? Struggling to get this working for two days.
I used @forge/bridge but getting “window is not defined” error.
Thanks.
Hi @VigneshKS,
This only works in a Custom UI app.
It is not possible to add this functionality to a UI Kit app.
Caterina
1 Like