Skip to content

Commit cc11b34

Browse files
authored
Enhance documentation for action URL handling
Added examples for dynamic URL generation and deep-level redirects in actions.
1 parent 6111f40 commit cc11b34

1 file changed

Lines changed: 44 additions & 2 deletions

File tree

  • adminforth/documentation/docs/tutorial/03-Customization

adminforth/documentation/docs/tutorial/03-Customization/09-Actions.md

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,9 +163,12 @@ Instead of defining an `action` handler, you can specify a `url` that the user w
163163
}
164164
```
165165

166+
> ☝️ Note: You cannot specify both `action` and `url` for the same action - only one should be used.
167+
166168
The URL can be:
167169
- A relative path within your admin panel (starting with '/')
168170
- An absolute URL (starting with 'http://' or 'https://')
171+
- function which creates URL based on record fields
169172

170173
To open the URL in a new tab, append `target=_blank` as a query parameter. If the URL already has query parameters, use `&target=_blank`; otherwise use `?target=_blank`:
171174

@@ -181,7 +184,46 @@ To open the URL in a new tab, append `target=_blank` as a query parameter. If th
181184
}
182185
```
183186

184-
> ☝️ Note: You cannot specify both `action` and `url` for the same action - only one should be used.
187+
Example to generate dynamic URL:
188+
189+
```ts
190+
{
191+
name: 'View on Google',
192+
icon: 'flowbite:external-link-solid',
193+
url: async ({record, adminuser}) => `https://google.com/search?q=Apartment ${record.title}`,
194+
showIn: {
195+
list: true,
196+
showButton: true
197+
}
198+
}
199+
```
200+
201+
> ☝️ Note: Though url function might be async we recommend to omit long awaits, or ideally don't use them at all, cause slow execution of this hoock might be a subject of bottleneck for resource pages rendering. For bult actions the async functions would be called in parallel to optimize loading speed.
202+
203+
204+
### Deep-level redirects.
205+
206+
Using `url` prop described above is recommended way to implementing URL navigation from actions (internal or external), because URLs are rendered into direct anchour tag and support all anchour features (like Open in new tab).
207+
208+
However, rearely you might also like to decide whether to redirect only after performing some logic (conditionally). This way is not recommended for most of cases, because it is not compatible with action native features (we can't know URL before executing action body):
209+
210+
```
211+
```ts
212+
{
213+
name: 'View on Google',
214+
icon: 'flowbite:external-link-solid',
215+
action: async ({ recordId }) => {
216+
if (await testSomething(recordId)) {
217+
return { ok: true, redirectURL: 'https://google.com/search?q=apartment' };
218+
};
219+
return { ok: true, successMessage: 'Done' };
220+
},
221+
showIn: {
222+
list: true,
223+
showButton: true
224+
}
225+
}
226+
```
185227

186228
## Custom Component
187229

@@ -313,4 +355,4 @@ Backend handler: read the payload via `extra`.
313355

314356
Notes:
315357
- If you don’t emit a payload, the default behavior is used by the UI (e.g., in lists the current row context is used). When you do provide a payload, it will be forwarded to the backend as `extra` for your action handler.
316-
- You can combine default context with your own payload by merging before emitting, for example: `emit('callAction', { ...row, asListed: true })` if your component has access to the row object.
358+
- You can combine default context with your own payload by merging before emitting, for example: `emit('callAction', { ...row, asListed: true })` if your component has access to the row object.

0 commit comments

Comments
 (0)