Intermediate code formatting

[R3dKap]

Today, at the bottom of the code editor there are 2 buttons to format the code: FORMAT TEXT and REMOVE FORMATTING.

FORMAT TEXT produces something like this:

ClearCollect(
    gloControlEnums,
    {
        name: "Font",
        values: Table(
            {
                name: "Arial",
                value: Font.Arial
            },
            {
                name: "Courier New",
                value: Font.'Courier New'
            },
            {
                name: "Dancing Script",
                value: Font.'Dancing Script'
            },
            {
                name: "Georgia",
                value: Font.Georgia
            },
            {
                name: "Great Vibes",
                value: Font.'Great Vibes'
            },
            {
                name: "Lato",
                value: Font.Lato
            },
            {
                name: "Lato Black",
                value: Font.'Lato Black'
            },
            {
                name: "Lato Hairline",
                value: Font.'Lato Hairline'
            },
            {
                name: "Lato Light",
                value: Font.'Lato Light'
            },
            {
                name: "Open Sans",
                value: Font.'Open Sans'
            },
            {
                name: "Open Sans Condensed",
                value: Font.'Open Sans Condensed'
            },
            {
                name: "Patrick Hand",
                value: Font.'Patrick Hand'
            },
            {
                name: "Segoe UI",
                value: Font.'Segoe UI'
            },
            {
                name: "Verdana",
                value: Font.Verdana
            }
        )
    },
    {
        name: "FontWeight",
        values: Table(
            {
                name: "Bold",
                value: FontWeight.Bold
            },
            {
                name: "Semibold",
                value: FontWeight.Semibold
            },
            {
                name: "Normal",
                value: FontWeight.Normal
            },
            {
                name: "Lighter",
                value: FontWeight.Lighter
            }
        )
    }
)

...while REMOVE FORMATTING produces this:

ClearCollect(gloControlEnums,{name:"Font",values:Table({name:"Arial",value:Font.Arial},{name:"Courier New",value:Font.'Courier New'},{name:"Dancing Script",value:Font.'Dancing Script'},{name:"Georgia",value:Font.Georgia},{name:"Great Vibes",value:Font.'Great Vibes'},{name:"Lato",value:Font.Lato},{name:"Lato Black",value:Font.'Lato Black'},{name:"Lato Hairline",value:Font.'Lato Hairline'},{name:"Lato Light",value:Font.'Lato Light'},{name:"Open Sans",value:Font.'Open Sans'},{name:"Open Sans Condensed",value:Font.'Open Sans Condensed'},{name:"Patrick Hand",value:Font.'Patrick Hand'},{name:"Segoe UI",value:Font.'Segoe UI'},{name:"Verdana",value:Font.Verdana})},{name:"FontWeight",values:Table({name:"Bold",value:FontWeight.Bold},{name:"Semibold",value:FontWeight.Semibold},{name:"Normal",value:FontWeight.Normal},{name:"Lighter",value:FontWeight.Lighter})})

...which looks like this in the code editor:

In fact, the code formatting that would REALLY be interesting (in terms of readability and maintenance) should be more like this:

ClearCollect(
    gloControlEnums,
    {
        name: "Font",
        values: Table(
            { name: "Arial", value: Font.Arial },
            { name: "Courier New", value: Font.'Courier New' },
            { name: "Dancing Script", value: Font.'Dancing Script' },
            { name: "Georgia", value: Font.Georgia },
            { name: "Great Vibes", value: Font.'Great Vibes' },
            { name: "Lato", value: Font.Lato },
            { name: "Lato Black", value: Font.'Lato Black' },
            { name: "Lato Hairline", value: Font.'Lato Hairline' },
            { name: "Lato Light", value: Font.'Lato Light' },
            { name: "Open Sans", value: Font.'Open Sans' },
            { name: "Open Sans Condensed", value: Font.'Open Sans Condensed' },
            { name: "Patrick Hand", value: Font.'Patrick Hand' },
            { name: "Segoe UI", value: Font.'Segoe UI' },
            { name: "Verdana", value: Font.Verdana }
        )
    },
    {
        name: "FontWeight",
        values: Table(
            { name: "Bold", value: FontWeight.Bold },
            { name: "Semibold", value: FontWeight.Semibold },
            { name: "Normal", value: FontWeight.Normal },
            { name: "Lighter", value: FontWeight.Lighter }
        )
    }
)

Another example...

With actual FORMAT TEXT:

If(
    StartsWith(
        ThisItem.value,
        "ColorFade"
    ),
    ColorFade(
        _galPalettePropertyColorRGBA.Fill,
        Value(
            Match(/* Get fading percentage */
                ThisItem.value,
                "-?\d+(?=(%\)))"
            ).FullMatch
        ) / 100
    ),
    _galPalettePropertyColorRGBA.Fill
)

...that could look like this with an INTERMEDIATE FORMATTING:

If(
    StartsWith( ThisItem.value, "ColorFade" ),
    ColorFade(
        _galPalettePropertyColorRGBA.Fill,
        Value( Match( ThisItem.value, "-?\d+(?=(%\)))" ).FullMatch ) / 100
    ),
    _galPalettePropertyColorRGBA.Fill
)

Some of the rules that could be applied for this INTERMEDIATE FORMATTING could be:

• no line of code must exceed the width of the code editor
• whether ALL or NONE of a function's parameters should be scattered on multiple lines

/* NO ! */
StartsWith(ThisItem.Value,
    "ColorFade"
)

/* YES ! */
StartsWith( ThisItem.Value, "ColorFade" )

• if a function call is laid out on a single line, all its parameters should be separated with spaces

/* NO ! */
StartsWith(ThisItem.Value,"ColorFade");
StartsWith(ThisItem.Value, "ColorFade")

/* YES ! */
StartsWith( ThisItem.Value, "ColorFade" )

• avoid as much as possible to scatter a function on multiples lines
• repetitive small groups of code should be "aligned" (like the example of the gloControlEnums in INTERMEDIATE FORMATTING above)
• ...

Note: I really don't see the use of the REMOVE FORMATTING feature since this is already done when publishing the app. And who on earth would ever use this type for code formatting ? 🙂

[xzDan]

Agreed.

A lot of the default formatting seems very unreadable with unnecessary spacing everywhere

[Bibinu75]

I think Formatting should automatically be applied when the expand button is clicked and removed when the editing box is collapsed back.

[Steve_W]

I agree there should be an alternative in between the 2 current options.

In my opinion FORMAT TEXT is extreme - a simple IF statement is spread across at least 4 lines, which is unnecessary.

However, I also see a use for the current REMOVE FORMATTING, which I have used when commenting out a section I want to change (but not delete). It condenses it down and I only have to use // once on the whole section instead of at the start of every line.

My solution would be a 'selective' REMOVE FORMATTING.

i.e. If you selected a line or lines in the formula and then clicked REMOVE FORMATTING it would only remove the formatting in the part you selected, leaving the rest as it was. This would very much help to condense sections of formula.
Alternatively if you just do a single left mouse click in the text (so that no section is highlighted) and then click REMOVE FORMATTING, it should remove formatting from the whole formula.