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

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!

Fabian_Weller

Hi @Amy In a Inline Deck View you can select a LongText column in the Secondary header. When this LongText column is formatted as Markdown, this can make the Inline Deck View look very strange / ugly.

Usually Markdown does not work with Deck Views. But since we are in a Detail view, also the Inline Deck View will show the Markdown.

amyplin

I'll make a note of this, thanks for letting me know!

Kirk_Masden

Hi Amy! Fabian's post is basically the same as mine (unless I'm misunderstanding it). I too hope that something can be do to fix this sort of problem in a table:

If the platform could recognize tags and then hide them in contexts where they do not make sense, that would be nice.

rajatrocks

Excited to see this new capability!

I would like to +1 the request to have images either auto-size to the portal or to be able to specify the width.

I also noticed that code snippets specified in plain text don't render in markdown properly. I have the following in my field:

```python
LINE1
LINE2
LINE3
```

And it renders as a code block with all the lines together:

LINE1LINE2LINE3

Thanks! - rajat

mateo

Hi everyone,
I have one report to make but firstly wanna thank for this feature. There is one problem. Whenever I wanna create a table I cannot style it at all. For example in current use case I need to center the whole table as the detail view is centered but cannot find any workaround.
<center> tag doesn't work, padding using CSS also doesn't work. Is there any way to make it?

PS. I can see above messages related to this. Hope now, there is a way to achieve what we all need! 🤗

SkrOYC

Just one question for the team @Amy @amyplin

Is this abandoned or what?

amyplin

Hey I’m happy to see there’s still a lot of interest in this! The team is currently focused on desktop apps and it has been our priority (https://www.googlecloudcommunity.com/gc/Announcements/Desktop-changes-coming-to-Preview-Program/m-p/...). But Rich Text Formatting is still on our radar and we have been/still are collecting feedback for when we pick it up again!

SkrOYC

I see, hope the public preview is out soon.

Well, if you still want some feedback... I'd say that we need to do at least some basic formating to html. Maybe general formating that will be considered as a "design system" for our apps.

For example, I want to right align numbers on html table but I can't

Kirk_Masden

This is a great feature. I now rely on it in many parts of my apps. How long until it officially becomes a permanent addition to the AppSheet family of features?

Taufan

HI,

How to change `<mark>` default color? The default color is "yellow".

I try to chage to "pink" with this formula below but didn't work:

This is my Formula in column [V definitions]

SUBSTITUTE([definitions], "[n]", "<mark style=""background: pink"">[n]</mark>")

Result:

Any idea?

SkrOYC

@Taufan wrote:
SUBSTITUTE([definitions], "[n]", "<mark style=""background: pink"">[n]</mark>")

@Amy wrote:
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)

Try format rules

Format Rules: The Essentials - AppSheet Help

fradri

Complete newb. I have taken this template and I am trying to allow for rich text in the Entries. LongText is already flagged, however I am not sure how to get the buttons (B, I, U, etc) to display when typing?

dbaum

@Amy wrote:

Users can input HTML or Markdown in the appropriate fields.

abc777

Good afternoon. Rich Text Formatting is a great function. But I see that there was no official release. and then the discussion stopped already half a year ago. Please tell me what are the restrictions on using this function? I began to actively use it and the application just started to crash (from the browser version and the desktop version), what can affect this? very large texts in long texts (I have up to 1500 words with tags)?, the presence of pictures (I have a lot of them but very small)? or some individual tags can cause instability?

Kirk_Masden

I have used lots of tags but haven't experienced crashing on a browser. I have had my app crash (restart, really) when I use it on an iPhone 6 but I think the cause was that my spreadsheet was too large for my little iPhone 6. I'm not sure what might be causing your problem.

Kirk_Masden

P.S. This still seems to be in preview:
https://www.googlecloudcommunity.com/gc/Release-Notes/bg-p/appsheet-releasenotes

abc777

and thanks for this link!

abc777

thanks for the answer. I still think that the point is the number of words in a long text. after I reduced the number of words, the application stopped crashing. And I also saw that all texts and tags from virtual columns can be copied to a Google spreadsheet and these tags work great. This also significantly speeded up the application.

Kirk_Masden

Interesting. How many characters were you putting in the text? Google sheets allows up to 50,000 and I have put nearly that many characters in some cells. Indeed, on my iPhone 6 cells with lots of characters might have been behind some crashes, but I'm not sure. When the application crashes, what happens exactly? On my little iPhone 6, the app would restart. Is that what happens in your case?

abc777

Initially, I wrote all the texts in the virtual column of the app, from 500 to 1500 characters. as such columns were added, cases of application crashes began to appear. The app just crashed without first freezing. I understand what I'm doing wrong by overloading the App sheet , which is why I asked myself - what are the limitations of Rich Text Formatting? and yes, of course, having transferred all the texts to the basic Google spreadsheet, the app crashes stopped, and I was pleased that the Format Rules of the App sheet also worked for this text

Kirk_Masden

This helps me understand. Most of the rich text formatting I'm using is in the Google spreadsheet text. Perhaps extensive use in virtual formulas leads to a different result.

V-A

Because it's cumbersome to write HTML tags on a mobile device (e.g. autotype) and AppSheet apps' desktop view seems to not yet support displaying columns with HTML format, does anyone have any tips OR suggested alternatives to input HTML from a mobile device's small screen?

I'm wondering if there's a way to populate a long-text HTML column by linking it to a file that can be edited with a text editor app, either automated or manual sync.

Has anyone done this? Is this possible? Are there other alternatives? Thanks.

Kirk_Masden

I was thinking about that yesterday. As I type this message now, my input box shows the following:

I was thinking yesterday that I would be cool to have options like this, particularly if we could determine what to show. Currently, though, I don't have any good ideas.

V-A

Yes, a WYSIWYG menu as you show for long-text columns input fields would improve the UX. From comments above, this doesn't seem an immediate priority though I may be wrong. Markdown formatting is a better UX over HTML though it isn't supported for email deliveries yet.

I'm trying to find an alternative to HTML and unformatted markdown email deliveries.

The only concept I came up with (beyond copying drafted HTML from another editing app and pasting it into the AppSheet app's long-text field) is to link a long-text column to another source with an <a> tag, though I haven't tried this yet.

Rifad

When I use rich text formatting for Inline views in a detail view. It works well in deck view and its not working in card viewtype.

SkrOYC

Afaik, it shouldn't work in either one of them

Fabian_Weller

In inline Deck View it is working since around 1 year now.

Rifad

It doesn’t work in deck view but if its used as inline inside a detail view it works. Maybe because the CONTEXT viewtype is detail. It would be amazing if it works in card view also.

Fabian_Weller

Yes that's right. Rich Text is working only in Detail View. Hence it's working also in an inline deck view that's part of a detail view. But I think it's a side effect and not really intended. Because it can look really bad in some cases.

Charlie

How did you get the reply button to have that shape?

Fabian_Weller

Hi @Charlie I think it's simply an image column which has assigned an action to it. You can see the arrows on the right. This is an action with the Prominence "Display inline" attached to the image column.

Rifad

Its a Longtext HTML Column with image in it. This way I was able to control the width of icon.

Kirk_Masden

I see. I take it, though, that width is controlled by keeping the number of pixels small, because, unless something had changed, images are not resized in such columns.

sikkin

why, now, appsheet in longtext, plaintext, markdown, html option NOT AVAILABLE, where iI can got it

dbaum

AppSheet preview program - AppSheet Help

paul_stan

@Amy , can we please get an update or timeline on this from two years ago. This is a MUCH needed feature for clear separation of information, especially when there is a lot of text.

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!