I would like to be able to trigger a query from a subsection of text.
I want the text to display like this
which I can do like this:
Once the editor has content, <a href="">click here</a>, or the button below to run the AI.
but this does not provide a way for me to trigger a query.
Is there any solution to achieve this type of behavior?
Edit: I tried adding my own onclick="" to the a tag but Retool seems to strip it off the rendered HTML
Curious to know too 
Can you break up the text so that you can control the "click here" portion as a separate component (like a button that has the outline/fill stripped out)? It's a little hacky, but unless you want to trigger a query which runs in a workflow I am not sure you can link your href to an in app query.
If you didn't need a response from your code, I would have suggested putting your code in a workflow and triggering it via webhooks
I am searching for a way to inherit or import all the current app styles into the custom component. As you can see, it is the wrong font and no link styling...
import React from 'react';
import { type FC } from 'react';
import { Retool } from '@tryretool/custom-component-support';
export const EmbeddedLink: FC = () => {
const [beforeLink] = Retool.useStateString({
name: 'beforeLink'
});
const [linkText] = Retool.useStateString({
name: 'linkText'
});
const [afterLink] = Retool.useStateString({
name: 'afterLink'
});
const onClick = Retool.useEventCallback({ name: "click" });
return (
<div>
<p>{beforeLink} <a onClick={() => onClick()}>{linkText}</a> {afterLink}</p>
</div>
);
};
Would this be best as a new question on custom component styling?
Probably? It really isn't about app building...
A second idea for placing the text...
export const DynamicEmbeddedLink: FC = () => {
const [bodyText] = Retool.useStateString({
name: 'bodyText',
initialValue: "This one is another idea"
});
const [linkText] = Retool.useStateString({
name: 'linkText',
initialValue: "click me"
});
const [linkIndexRaw] = Retool.useStateNumber({
name: 'linkIndex',
initialValue: 0
});
const onClick = Retool.useEventCallback({ name: "click" });
const words = bodyText.trim().split(/\s+/);
const index = Math.max(0, Math.min(linkIndexRaw, words.length));
const finalWords = [...words];
finalWords.splice(index, 0, "LINK_TEXT");
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
onClick();
};
return (
<p>
{finalWords.map((word, i) =>
word === 'LINK_TEXT' ? (
<a key={i} href="#" onClick={handleClick}>
{linkText}
</a>
) : (
<span key={i}>
{word}
{i < finalWords.length - 1 ? ' ' : ''}
</span>
)
)}
</p>
);
};
Ah. I misunderstood.
Either way, I'd love to know from a Retool-er if there is an easy way to have custom components inherit the app's styles.
@khill-fbmc,
There is no EASY way to have custom components inherit the retool parent app's styles. You can, however, apply individual styles to your custom component. For the link tag, I used these class names, which are applied in the retool parent app to all links:
<a className = "_button_1392w_5 _link_1392w_56 _alwaysUnderline_1392w_70 " href="#some_id">try this</a>
It'll look like this:
(I had to add a link component in the main app and inspect the elements to get its class names...)
Hi @khill-fbmc!
Trying to answer the original question for this thread -
Have you tried using just a plain HTML Retool component?
I was able to get this working using the data-click-target attribute on an a tag and setting up a query to run on the Click event.
Something like this:
<div class="myClass">
Hello World
<a data-click-target="example">Click Here!</a>
</div>
Demonstration:
Here's the example app json file you can upload if that helps too
Trigger Query Text Click Example.json (6.9 KB)
@mitchmess ,
Thank you so much! I was trying to do this with button and onClick, but could not get it to work! This is perfect.