Skip to main content
Solved

Possible to make line break in a table

  • January 19, 2021
  • 6 replies
  • 40 views
Kim_Trager1
Forum|alt.badge.img+23

I’m trying to make a simple repport and wonder if I can make line breaks in a table?

I have tried a few different things like:

  output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': 'finished\ncompleted' , '%':100},
        ]
    )

 output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': 'Delivered<br>Completed' , '%':100},
        ]
    )

 output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': 'Delivered\nCompleted' , '%':100},
        ]
    ) 

output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': ['Delivered', 'Completed'] , '%':100},
        ]
    ) 

 output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': `Delivered
        Completed` , '%':100},
        ]
    )

The closest I’ve come to a line break is this:

 output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': [{'Finished': 'Delivered'}, {'Finished': 'completed' }] , '%':100},
        ]
    )

However it’s not user friendly as it just lists two objects, and I just need two stacked strings.

Is it not possible at all to make a line break?

Best answer by Bill_French

Thank you again Bill…

Do you mean sending it back into a table that supports newline and taking it back into the script again.?

One day I want to ‘graduate’ to React and SDK, however might be a bullet a little too big to bite atm. I tried to get to grips with React, but do not have enough time atm to really get it going.


No - just use the script block to fabricate a markdown string that contains table properties like this.

UPDATE - not entirely certain you can insert line breaks inside markdown strings, so I may be in err about this. But, the markdown columns should naturally add line wraps given the width of the content and the width of the viewport.

output.markdown('# Record Linking Example');

// select the table
let currentTable = await input.tableAsync('Select a table');
let queryResults = await currentTable.selectRecordsAsync();
let oRecords     = queryResults.records;

// build the list
var recordList = "";
for (let record of oRecords)
{
    recordList += "- [" + record.name + "](" + currentTable.url + "/" + record.id + ")\n";
}

// render the list
// output.markdown(recordList);

// build the list
var recordList = "| Record ID   | Name        |\n";
recordList    += "| ----------- | ----------- |\n";
for (let record of oRecords)
{
    thisName = "";
    recordList += "|[" + record.id + "](" + currentTable.url + "/" + record.id + ")|" + record.name + "|\n";
}

// render the list
output.markdown(recordList);

6 replies

B
Forum|alt.badge.img+19
  • Bill_French
  • Inspiring
  • 3263 replies
  • January 19, 2021

Table.output() is not designed for custom rendering of data. If you use output.markdown() and build out the table using markdown tags, you can achieve some degree of newline and wrap control. However, if this is in a script block, you will ultimately hit a ceiling leaving you with three outs:

  1. Write the results data to an actual table where fields do support newline and wrap rendering.
  2. Move from Script Block to a Custom App (and the SDK).
  3. Send the data to something external that handles the rendering required.
Kim_Trager1
Forum|alt.badge.img+23
  • Kim_Trager1
  • Author
  • Brainy
  • 168 replies
  • January 20, 2021

Thank you again Bill…

Do you mean sending it back into a table that supports newline and taking it back into the script again.?

One day I want to ‘graduate’ to React and SDK, however might be a bullet a little too big to bite atm. I tried to get to grips with React, but do not have enough time atm to really get it going.

B
Forum|alt.badge.img+19
  • Bill_French
  • Inspiring
  • 3263 replies
  • Answer
  • January 20, 2021

Thank you again Bill…

Do you mean sending it back into a table that supports newline and taking it back into the script again.?

One day I want to ‘graduate’ to React and SDK, however might be a bullet a little too big to bite atm. I tried to get to grips with React, but do not have enough time atm to really get it going.


No - just use the script block to fabricate a markdown string that contains table properties like this.

UPDATE - not entirely certain you can insert line breaks inside markdown strings, so I may be in err about this. But, the markdown columns should naturally add line wraps given the width of the content and the width of the viewport.

output.markdown('# Record Linking Example');

// select the table
let currentTable = await input.tableAsync('Select a table');
let queryResults = await currentTable.selectRecordsAsync();
let oRecords     = queryResults.records;

// build the list
var recordList = "";
for (let record of oRecords)
{
    recordList += "- [" + record.name + "](" + currentTable.url + "/" + record.id + ")\n";
}

// render the list
// output.markdown(recordList);

// build the list
var recordList = "| Record ID   | Name        |\n";
recordList    += "| ----------- | ----------- |\n";
for (let record of oRecords)
{
    thisName = "";
    recordList += "|[" + record.id + "](" + currentTable.url + "/" + record.id + ")|" + record.name + "|\n";
}

// render the list
output.markdown(recordList);
Kim_Trager1
Forum|alt.badge.img+23
  • Kim_Trager1
  • Author
  • Brainy
  • 168 replies
  • January 21, 2021

No - just use the script block to fabricate a markdown string that contains table properties like this.

UPDATE - not entirely certain you can insert line breaks inside markdown strings, so I may be in err about this. But, the markdown columns should naturally add line wraps given the width of the content and the width of the viewport.

output.markdown('# Record Linking Example');

// select the table
let currentTable = await input.tableAsync('Select a table');
let queryResults = await currentTable.selectRecordsAsync();
let oRecords     = queryResults.records;

// build the list
var recordList = "";
for (let record of oRecords)
{
    recordList += "- [" + record.name + "](" + currentTable.url + "/" + record.id + ")\n";
}

// render the list
// output.markdown(recordList);

// build the list
var recordList = "| Record ID   | Name        |\n";
recordList    += "| ----------- | ----------- |\n";
for (let record of oRecords)
{
    thisName = "";
    recordList += "|[" + record.id + "](" + currentTable.url + "/" + record.id + ")|" + record.name + "|\n";
}

// render the list
output.markdown(recordList);

Thank you again @Bill.French I fiddled around with the markdown(). Not ideal but does the job for now.
I’ll have to up my game to React so I can get involved with some custom apps.

B
Forum|alt.badge.img+19
  • Bill_French
  • Inspiring
  • 3263 replies
  • January 21, 2021

Thank you again @Bill.French I fiddled around with the markdown(). Not ideal but does the job for now.
I’ll have to up my game to React so I can get involved with some custom apps.


Indeed, script block is severely limited in terms of UI capabilities. I urge the Airtable team to consider at least adding a sanitized ability to output HTML/CSS into the already sandboxed script block frame. It would allow us to put a nice tidy UX on top of data and computations.

Kim_Trager1
Forum|alt.badge.img+23
  • Kim_Trager1
  • Author
  • Brainy
  • 168 replies
  • January 21, 2021

Indeed, script block is severely limited in terms of UI capabilities. I urge the Airtable team to consider at least adding a sanitized ability to output HTML/CSS into the already sandboxed script block frame. It would allow us to put a nice tidy UX on top of data and computations.


+1 for that suggestion


Terms & ConditionsAccessibility statement