Do not display text if value is NULL

App Building
1

I have a text box that I use to display contact information for a dealer once that dealer has been selected from a drop down box. I am using the following:

{{ query27.data.contact ? 'Contact: ' + query27.data.contact : "" }}
{{ query27.data.office_phone ? 'Office: ' +  query27.data.office_phone : "" }}
{{ query27.data.cell_phone ? 'Cell: ' + query27.data.cell_phone : '' }}
{{ query27.data.email ? 'Email: ' + query27.data.email : "" }}

The problem is, if there is a null in the database for any of these fields, this code is still displaying Title, like this:

textbox

I would rather it not display anything at all. Not even a blank line if possible. Does anyone know how I can achieve this?

2

Hello @tomm!

When you say that you'd like it to 'not display anything at all' do you mean that you want those lines to be removed from the text or that you want the whole text item to be blank?

3

I just want those lines removed. So, in the example photo I included, I would want it to show:

Office: (937) 938-0053
Email: jacque@advancedbackyardsolutions.com

I hope that makes sense.

1 Like
4

In that case I think you just need to update your ternary conditions to check instead for null/blank/undefined values instead of just seeing if the property exists. Something like:

{{ (query27.data.contact != null && query27.data.contact != undefined) 
? 'Contact: ' + query27.data.contact 
: "" }}
5

Afraid that didn't work either.

6

Can you add in one more condition to the others to check for non-null blanks? != ''

It may be that the data isn't actually null or undefined but just an empty string.

2 Likes
7

This is my first idea? I'd reach for lodash

{{
  _.thru(query27.data, ({ contact, office_phone, cell_phone, email }) => {
    return _.compact([
      contact ? `Contact: ${contact}` : null,
      office_phone ? `Office: ${office_phone}` : null,
      cell_phone ? `Cell: ${cell_phone}` : null,
      email ? `Email: ${email}` : null
    ]).join('<br />');
  })
}}

I'd probably put that in a transformer to let the component be a reference to the value and not carry the code.

8

Hey @tomm,

Another option is to use the key value component which will do this for you automatically. Any field that is set up to be shown, if it is null it won't appear.

10

Thank you @MiguelOrtiz . This turned out to be a very easy way to get the text I wanted.

2 Likes
11

Hey @tomm,

Just a word of caution.

If after your initial setup, your query 27 should return new values that haven't been configured, it will automatically show them in your component, so you may end up with key/values showing up that you didn't plan to show.

Just something to bear in mind as your queries/schemas evolve.

This may be also a feature request for the retool team, for new keys to be by default hidden. @Darren

12

@MiguelOrtiz: I feel like the component should display whatever source data that is specified and update dynamically in response to any changes in that data. If there is ever a need to filter the input data in a meaningful way, I'd recommend putting a transformer between the two.

1 Like