LinkedIn
Twitter
The following feature has been added to the Preview Program. Feel free to try out the feature and report issues or possible improvements in this thread.
AppSheet is expanding how text can be formatted. For data that is typed as LongText, app creators can now choose to render Markdown or HTML in Detail views.
Note: In all views other than Detail, the value will render as plain text.
How do app creators use the feature?
- Start with data that has HTML or Markdown inputs.
In this example, the Quote column contains HTML data and the Reviews column contains Markdown data.
- In the AppSheet editor, go to Data > Columns, expand the desired table, and set the Type field to
LongTextfor the columns that you want to render Markdown or HTML in Detail views.
- Click
to modify the row, and set the Formatting field to HTML or Markdown (depending on your column data).
- Save your application. You should see the rendered text within the Detail view of your app.
How do app users use this feature?
Users can input HTML or Markdown in the appropriate fields.
What are the supported views?
Currently rich-formatted text will only be rendered in Detail views - all other views will display plain text.
What are the supported data types?
The column type must be set to LongText with the format set to HTML or Markdown.
What are the supported HTML tags?
<a>, <b>, <strong>, <i>, <u>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup>, <p>, <li>, <ol>, <ul>, <br>, <hr>, <blockquote>, <img>, <h1>,<h2>,<h3>,<h4>,<h5>,<h6>, <table>, <tbody>,<tr>,<td>, <th>
- Unsupported tags will be rendered as plain text.
- Allowed attributes:
for<a>:href,name, andtarget
for<img>:src - All other attributes will be removed (for example, inline styles such as
<p style="color:red;">A red paragraph.</p>will be removed and will not have any effect).
What are the supported Markdown elements?
Heading, bold, italic, blockquote, ordered list, unordered list, inline code, code block, horizontal rule, link and image.
Example: Using a virtual column
- Create a virtual column and set its column type to
LongTextand formatting to HTML. - Edit the App Formula to use the
CONCATENATEformula to combine HTML tags with column values. - Save and view your app.
The resulting app:
Please let us know your feedback in this thread!
I have two reports to make. The first one is positive and the second is of a problem.
- List function works nicely in my app!
I had a part of my app that looked like this:
This is the Japanese side of a bilingual part of the app but the formatting issue is the same. As you can see, I wasn’t able to indent. Also, I had to be careful to keep each item short because text wrapping would make it look even worse. Now it looks like this:
Yippee! Much better! The use of tags instead on actual line breaks also saves vertical space in my Google sheet. Lots of things to be happy about!
- Links in text not working on my iPhone
Here’s the code:
To use your <i>app</i> on a computer, open <a href="https://www.appsheet.com">AppSheet.com</a> in your browser,
I looks fine on all of my devices:
And, it works properly on my computer and on a Android device. On my iPhone, however, I get this when I try to tap on the link:
P.S. All of this was done in physical columns, not virtual ones.
I was wondering why I hadn’t noticed this post earlier and now I know – there’s a problem with the “What’s New” section of the community website:
“MySQL - Support” has been at the top in the “Latest” category for a while now but the original post was 16 days ago and the last comment was 4 days ago. This post is newer by any measure and, in fact, if one clicks on the orange “Announcements” link, one gets this:
I’m glad to know the workaround but one shouldn’t have to know a special trick to find the latest information. I hope someone can fix this.
P.S. Thanks to @tsuji_koichi for telling me about this new feature in another thread. Otherwise, it might have taken me even longer to find it, even though I made a point of checking “What’s New” from time to time.
This rich text formatting feature is a big step forward for me. Thanks again!
I’d like to point out one tiny way in which the editor interface might be improved to prevent creators from wasting time with mistakes. Currently, it’s possible to choose “HTML” even though the column type is not “long text”:
If “Markdown” and “HTML” could be greyed out when the file type is not long text, that would prevent careless errors of the sort I just made myself.
By the way, I hope rich text formatting will definitely become a permanent part of the platform. If not, it’s going to take me a while to undo all of the html I have added.
Thank you very much @Amy for this new feature.
In our App we receive error messages sent from heating systems. They come by e-mail and often are in html format. Like “To see the status of the heating system click here”.
Before, we connected the emails with Zapier to our AppSheet App. But the message came as plain text and any “click here” was not clickable.
Now we can send html text to our AppSheet App and the user can see the email as it looks in outlook.
That’s very cool.
By the way: Now we use Integromat instead of Zapier.
Since E-Mails also have a header, I had to remove the header via RegEx to only get the body:
<body[^>]*>((.|[\n\r])*)<\/body>
If not, the message would start like this in AppSheet:
<html>
<head>
<meta />
</head>
<body>
Maybe you could remove the header automatically?
I also had to remove tags like these via RegEx:
<script[^>]*>((.|[\n\r])*?)<\/script>|<\/?div.*?>|<\/?label.*?>|<\/?span.*?>
Again, I’m very happy to have rich text formatting capabilities. I’ve been playing around with them recently and have one more observation to make.
In Deck view, the tags are not rendered but not hidden either:
In Detail view, all is well:
So, since I can imagine that rendering the tags in Deck view may not be possible, I wonder if the app could automatically hide such tags.
