Re: Rich Text Formatting - in Preview Program - Page 4

Amy · 08-10-2021 12:53 PM

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 LongText for 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, and target
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 LongText and formatting to HTML.
Edit the App Formula to use the CONCATENATE formula to combine HTML tags with column values.
Save and view your app.

The resulting app:

Please let us know your feedback in this thread!

amyplin

Hello thanks for your continued interest in Rich Text Formatting! We've been really busy with the Desktop UI and Visual Editor Features and haven't had time for much else 😔 I'll see if there's any possibilities for some small changes for Rich Text Formatting but I can't promise any timelines. Thanks for understanding and being patient!

Rifad

@amyplin

Thanks a lot for your hard work – it really shows in what you do. I'm not looking for anything too fancy, just a couple of straightforward tweaks. A bit of rich text formatting would be a gaame-changer, and if we could get a bigger LongText box, that'd be fantastic. The current one feels a bit cramped, especially with the new desktop UI rolling out.

These additions wouldn't just be nice to have; they're pretty essential, considering how they'd enhance usability. I've noticed that most of our competitors, and even newer tools in different areas like https://clickup.com/, are offering some pretty advanced rich text options. It's super useful for business scenarios, helping to present data more clearly.

Given that our user base is primarily business-oriented, these features become even more critical. They'd really help in terms of input clarity and data presentation. I'm more than happy to brainstorm and share how these features could be put to good use in various scenarios.

Looking forward to any updates on this, and thanks again for all your efforts!

Here is the request I raised in the community but no one have seen it I guess: https://www.googlecloudcommunity.com/gc/Feature-Ideas/Request-for-Integration-of-Rich-Text-Formattin...

Kirk_Masden

I realize you're busy but this needs to be escalated. The problem is not merely aesthetic -- entire apps have probably been rendered useless. The only way to fix them is to go through the entire app and remove all of the rich text designations -- so it's a major problem.
I'm an iPhone user and my iPhone works fine. But when I saw a comment above about rich text not working on mobile devices, I tested my rather old (and not very powerful) Android device, which is an LG-X5, running Android 11 :
https://www.gsmarena.com/lg_x5-8183.php
Newer phones may be OK but I suspect that AppSheet should still be compatible with Android 11.
I tested this issue on my LG-X5 and found that I could get it to work if I turned off the HTML (returning it to "Plain text"). Otherwise, Detail views and had rich text columns on them were entirely blank.
Some people may be able to make their apps work on Android by turning off "Preview new features" but my app depends on a lot of new features to turning that off would also be a major problem.

amyplin

Hello, sorry for the inconvenience - let me dig into this!

Kirk_Masden

Thanks for the quick response! I see that I need to update my version of Chrome. I'll do that and report back about whether that fixed my problem. In the meantime, here's the information I see on my phone:
Application version
Chrome 113.0.5672.77
Operating system
Android 11; X5-LG Build/RKQ1.201123.002

After the update, my version of Chrome is 120.0.6099.115
Unfortunately, even after restarting my phone, the problem is the same.

Here are some other relevant threads:

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Rich-text-currently-rendering-apps-useless-on-A...

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/HTML-Fehler-Android-App/m-p/685455#M232415

amyplin

Thanks! Can you also send me your app name? And can you also try one more thing: does the bug repro when you use the mobile Chrome on the same device?

Kirk_Masden

Sure. Here's the URL of a very simple app I've used for testing:
https://www.appsheet.com/template/AppDef?appName=Inputfunctiondec192023-230844&appId=39ae8288-365f-4...
I think the app name that you need is in the URL. My account is the same one that I am posting with now.

Here's a screenshot of the column that causes the problem on my Android phone:

amyplin

Thanks we're testing a potential solution right now, can you let me know if you're still seeing the bug in your app?

Kirk_Masden

Thanks for the followup. I have a student who was unable to use his app that reported that his problem has been resolved. However, on my phone, I'm still not able to see the affected menus. Is there some information I would send you to help you with the debugging?

amyplin

hm interesting, have you already tried closing and restarting the AppSheet app?

Kirk_Masden

Sorry for that basic mistake. After closing and restarting the app, all is well. Thanks!!!

Kirk_Masden

By the way, I'm not sure what you mean by the following: "Does the bug repro when you use the mobile Chrome on the same device?"

amyplin

On your Android device can you try opening the chrome app and pasting your app url, you should be able to access your app within the chrome app (instead of the AppSheet app).

amyplin

Can you let me know what version of Chrome you have installed on the device? (Feel free to direct message me if you'd like)

appiPHI

@amyplin I agree with getting a way to add rich text, the actual box I am typing this message in is already an example of this in googles toolbox. I am not sure why it would take so long to implement, my clients are asking to make things bold or underline all the time and they cannot learn Tags, it will never happen. Please escalate this.

Denzil_Snyman

@amyplin Yes please, escalate this. Really simple thing that can attract more clients.

LEX_STUDIO

Rich Text is not showing on mobile devices but works on desktop device. Please any assistance?

Kirk_Masden

I'm not seeing it on my iPhone but, on my Android device, I'm no longer able to use the app. I'm not sure if this is because of rich text or not, but the only views that don't work on my Android device are detail views in which I have long text set to rich text.

Rifad

@Amy wrote:

Allowed attributes:
for <a>: href, name, and target

@Amy Please take a look at this and provide guidance on the most effective approach to achieve this. Building own URL Link to a Record in Email/SMS - Google Cloud Community

@Rifad wrote:

Your advice has been effective for me for years, and I'm grateful for that. Recently, I decided to incorporate the new 'longtext' HTML into an 'a href' tag. Everything seems fine, but the problem is that it opens in a new tab. Ideally, I'd like it to open within the same application. Here's an example of what I tried:
CONCATENATE(
"<a href=""", concatenate("https://www.appsheet.com/start/", 
  "aeca9c29-f691-4faa-954d-d850a3ec82f3", 
 "?refresh=1&wipe=1", 
linktorow([Key], "TestView")
),""" target=""_self"">Visit Example</a>")
Unfortunately, it still opens in a new window, not within the app itself. @MultiTech

@Amy Please provide guidance on this; it would be a valuable feature to enable seamless navigation to various forms and views directly from LongText, as well as the integration of multiple actions per column.

Rifad

When enhancing rich text formatting, it's important to consider this as another feature. It involves using commands such as '/' or '@' to mention people or any type of entities throughout the app, similar to a hyperlink with auto-complete functionality. @Amy

I'm trying to create a Text field in a form that w... - Google Cloud Community

We currently utilize an enum dropdown, but the dropdown suggestions are not user-friendly and lack usability in various scenarios.

Karimmc2

Can we get this feature on "Show" type columns?

Rifad

Hey AppSheet team! Just wanted to check in on the status of this feature. It's been 2 years, 7 months since its release, and it appears to still be in preview (please correct me if I'm wrong). It's unusual for a platform to leave a feature in this state for so long (Unless entire platform is abandoned). Can anyone provide some insight on the future of AppSheet?

Fabian_Weller

CC @Aleksi @lizlynch

Kirk_Masden

I sure hope this never goes away. I've made it an integral part of a lot of content I've made for an app of mine.

Perhaps the delay is because AppSheet is planning to expand the range of tags we can use in HTML. That would be nice. 🙂

ktsmediaprod

Bump

Rifad

@Kirk_Masden wrote:

Perhaps the delay is because AppSheet is playing to expand the range of tags we can use in HTML

That's a great way to think about it! But waiting almost 3 years for this basic feature seems a bit crazy, especially when it's something that's so common in other platforms. It would have made more sense back in the early 2000s, but now with technology advancing so quickly and ai is making apps, it's a bit frustrating that something as simple as rich text formatting is being overlooked. Just a few lines of code could make a big difference in improving the app.

Kirk_Masden

Thanks! By the way, sorry for the typo. Should have been "planning to expand . . ."

wouter493

Kirk_Masden

Yes, and more attributes for images (fill, etc.). I think we could come up with quite a list. 🙂

JPAlpano

Is there anyway to make use the <<Start:>> <<End>> expressions to loop through a [Related Items] column?
(like rendering each item in a table cell or a <ul>?

jaichith

have you found this ?

JPAlpano

No. It really. I haven't found a way to iterate through [Related Records][Column Name] to display them as individual bullets in an unordered list (<ol><li></li></ol>).

SkrOYC

Use Markdown instead.
Using [List] as an example.

SUBSTITUTE(
  [List],
  " , ",
"
1. ")

Fabian_Weller

Very cool thank you @SkrOYC 😀

jaichith

can you please work on it and share here the results ?

Denzil_Snyman

@JPAlpano Hi. I hope your still Full of... 🙂

Is this question related to <<Start:>> <<End>> expression looping in docs template table? If so, I am looking to also resolve something like this for multi column image reports.. I would like to put each cell expression in it's own table inside the current cell and have it loop there so I can set minimum heights for each ID. In the current format it just makes one long cell with item images repetead back to back.

JPAlpano

No. I am talking about using the <<Start>><<End>> ito be used for LongText columns in Detail View.
Not related to PDF/HTML Templates at all.

Kirk_Masden

Thanks to the good folks at AppSheet for making it easier to embed images in LongText columns via HTML. Images are now automatically resized! Yipee!

Here's a tip I wrote that is based on this improved usability:

Display images in LongText columns via HTML (rich text)
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Display-images-in-LongText-columns-via-HTML-rich...

jaichith

Colored text possible here ?

Kirk_Masden

I use <mark>, which looks like this (but a bit brighter in AppSheet). But more options would be nice, of course.