CIQ System 5: Improved App Settings - Thanks! (and a feature request - please render newlines in settings titles)

Thanks for the improved app settings in CIQ System 5! This will empower devs to simplify the UX of apps with complex/large numbers of settings, so it's much appreciated!

forums.garmin.com/.../welcome-to-connect-iq-system-5

We know mobile app settings are important to your app experience, and we are giving you some new options for structuring your settings presentation.

Groups allow you to group a collection of related settings together. In mobile applications, they are editable in a sub-page, while in Garmin Express, they will be grouped together. You can also allow a group to be enabled and disabled by a Boolean setting. Groups can have a description string to explain the settings contained within.

Growable lists allow the user to edit a list of records. The user can add records up to a predetermined size or remove them from the list. In your app, they will show up as an array of dictionaries.

I was playing with this feature in the simulator (it's only available in the latest beta SDK) and I did notice that newlines in settings titles are still ignored (although long lines are wrapped, at least in the simulator *) (* I have noticed in the past that long lines have been truncated on some apps/platforms, like Garmin Connect for Android IIRC.)

It would be really great if we could at least use newlines in settings titles (to say nothing of other kinds of rich text), because it would enable us to write readable descriptions for a complex setting, and or to write summary/help text/extra info within the settings page itself (as opposed to having the user open another web page).

Or maybe there could be a settings element which is just inline help/free-form text, with support for newlines and possibly other formatting? But really, just rendering newlines in settings titles would be a huge bonus IMO.

For example, here's a screenshot of the settings page for a very popular app which has half a million downloads (one of my favorites, personally). Clearly the Race Prediction Time title wasn't meant to be one run-on wall of text. It would look a lot better and be much easier to read if newlines were rendered.

Here's a counter-example from iOS's Wi-Fi settings, where having auxiliary help text can be helpful:

0 Shent-Aurkhan (SHN) over 3 years ago

Hi FlowState !

Do you have them to work ?

When I tried the New settings system I have an empty settings page with '' couldnt connect to the simulator ''

If I remove group, it works again.

That is a shape there is no sample of it (Unless I missed it)

Furthermore, the f6 system 5 does not work for me, there is no ciq to sélect so it cant run. Venu2 sys 5 is OK.

I updated sdk, sdk manager, plug in and devices and of course rebooted Eclipse.

0 FlowState over 3 years ago in reply to Shent-Aurkhan (SHN)

I have it working in Visual Code and Connect IQ 4.1.0 Beta 1, although running apps is now a little flakey (I get the same error message - "cannot connect to simulator" sometimes). I get around this by running the app again when the first try fails.

I don't even see F6 System 5 or Venu 2 System 5 in my device library lol. If I set the minimum API level to 4.1.0 and try to edit products, the list is empty (as expected).

The only thing I tried was the new settings which I'm assuming should work with all devices regardless of API level.

I was able to create a group of 1 setting which could be toggled by another boolean setting. I'm sure the UX will be a lot nicer in Garmin Connect or Connect IQ (like the screenshot in the announcement)

<properties>
    <property id="prop1" type="boolean">true</property>
    <property id="prop2" type="number">1</property>
</properties>

<settings>
    <setting propertyKey="@Properties.prop1" title="@Strings.prop1Title">
        <settingConfig type="boolean">
        </settingConfig>
    </setting>
    <group id="group1"
        title="@Strings.group1Title"
        description="@Strings.group1Description"
        enableIfTrue="@Properties.prop1"
    >

        <setting propertyKey="@Properties.prop2" title="@Strings.prop2Title">
            <settingConfig type="numeric">
            </settingConfig>
        </setting>
    </group>
</settings>

<strings>
    <string id="AppName">testdf2</string>

    <string id="prop1Title">Boolean Toggle</string>
    <string id="group1Title">Group Title</string>
    <string id="group1Description">Group Description</string>
    <string id="prop2Title">Numeric
Setting
Title
With
Newline
After
Each
Word
:(
</string>
</strings>

I did notice that if I click really fast, I can get the group to be hidden while the corresponding boolean is true, and vice versa. Hopefully that won't be reflective of the Garmin Express experience (or any other of the other app/platform combos for settings.)

Also, it's too bad the only option is "enableIfTrue", but I guess it's better than nothing. (What if we need enableIfFalse, or "enable/disable when enum value is X"?)

0 Shent-Aurkhan (SHN) over 3 years ago in reply to FlowState

Many thanks for your very well explained example!

Does not seem to work on Eclipse, even if I copy/past your code,

"could not connect to the simulator"

Thanks

0 jim_m_58 over 3 years ago in reply to Shent-Aurkhan (SHN)

Have you tried doing settings from the sim itself? Under File, Edit Persistent Storage, Edit Application.Properties data

0 MarkusGL over 3 years ago

Thank you for your test!

Have you tried to use the "\n" to force the newline?

0 Shent-Aurkhan (SHN) over 3 years ago in reply to jim_m_58

ah ah ah I feel so stupid, I did not even know we could do that... Many thanks and indeed it works,

here is a result of a test (to let the others know)

Let say we have in "common" settings Group1, with inside Data1.a and Data1.b

<group id="recordInfo" 
        title="@Strings.recordInformation" 
        description="@Strings.recordInfoGroupDescription">
        
        
    <setting propertyKey="@Properties.CLR0" title="@Strings.C0t">
        <settingConfig type="list">
            <listEntry value="0xFFFFFF">@Strings.ColorWhite</listEntry>
        	<listEntry value="0xAAAAAA">@Strings.ColorLightGray</listEntry>
        	<listEntry value="0x555555">@Strings.ColorDarkGray</listEntry>
            <listEntry value="0x000000">@Strings.ColorBlack</listEntry>
            <listEntry value="0xFF0000">@Strings.ColorRed</listEntry>
            <listEntry value="0xAA0000">@Strings.ColorDarkRed</listEntry>
            <listEntry value="0xFF5500">@Strings.ColorOrange</listEntry>
            <listEntry value="0xFFAA00">@Strings.ColorYellow</listEntry>
            <listEntry value="0x00FF00">@Strings.ColorGreen</listEntry>
            <listEntry value="0x00AA00">@Strings.ColorDarkGreen</listEntry>
            <listEntry value="0x00AAFF">@Strings.ColorBlue</listEntry>
            <listEntry value="0x0000FF">@Strings.ColorDarkBlue</listEntry>
             <listEntry value="0xAA00FF">@Strings.ColorPurple</listEntry>
            <listEntry value="0xFF00FF">@Strings.ColorPink</listEntry>
        </settingConfig>
    </setting>

    <setting propertyKey="@Properties.CLR1" title="@Strings.C1t">
        <settingConfig type="list">
            <listEntry value="0xFFFFFF">@Strings.ColorWhite</listEntry>
        	<listEntry value="0xAAAAAA">@Strings.ColorLightGray</listEntry>
        	<listEntry value="0x555555">@Strings.ColorDarkGray</listEntry>
            <listEntry value="0x000000">@Strings.ColorBlack</listEntry>
            <listEntry value="0xFF0000">@Strings.ColorRed</listEntry>
            <listEntry value="0xAA0000">@Strings.ColorDarkRed</listEntry>
            <listEntry value="0xFF5500">@Strings.ColorOrange</listEntry>
            <listEntry value="0xFFAA00">@Strings.ColorYellow</listEntry>
            <listEntry value="0x00FF00">@Strings.ColorGreen</listEntry>
            <listEntry value="0x00AA00">@Strings.ColorDarkGreen</listEntry>
            <listEntry value="0x00AAFF">@Strings.ColorBlue</listEntry>
            <listEntry value="0x0000FF">@Strings.ColorDarkBlue</listEntry>
             <listEntry value="0xAA00FF">@Strings.ColorPurple</listEntry>
            <listEntry value="0xFF00FF">@Strings.ColorPink</listEntry>
        </settingConfig>
    </setting>
    
    <setting propertyKey="@Properties.CLR2" title="@Strings.C2t">
        <settingConfig type="list">
            <listEntry value="0xFFFFFF">@Strings.ColorWhite</listEntry>
        	<listEntry value="0xAAAAAA">@Strings.ColorLightGray</listEntry>
        	<listEntry value="0x555555">@Strings.ColorDarkGray</listEntry>
            <listEntry value="0x000000">@Strings.ColorBlack</listEntry>
            <listEntry value="0xFF0000">@Strings.ColorRed</listEntry>
            <listEntry value="0xAA0000">@Strings.ColorDarkRed</listEntry>
            <listEntry value="0xFF5500">@Strings.ColorOrange</listEntry>
            <listEntry value="0xFFAA00">@Strings.ColorYellow</listEntry>
            <listEntry value="0x00FF00">@Strings.ColorGreen</listEntry>
            <listEntry value="0x00AA00">@Strings.ColorDarkGreen</listEntry>
            <listEntry value="0x00AAFF">@Strings.ColorBlue</listEntry>
            <listEntry value="0x0000FF">@Strings.ColorDarkBlue</listEntry>
             <listEntry value="0xAA00FF">@Strings.ColorPurple</listEntry>
            <listEntry value="0xFF00FF">@Strings.ColorPink</listEntry>
        </settingConfig>
    </setting>  
    
</group>

if I create a jungle for specific device because Data1.a will not be the same list for exemple.

fenix6pro.resourcePath = $(fenix6pro.resourcePath);fullcolor-resources

and just put:

    <setting propertyKey="@Properties.CLR0" title="@Strings.C0t">
        <settingConfig type="list">
            <listEntry value="0xFFFFFF">@Strings.ColorWhite</listEntry>
        	<listEntry value="0xAAAAAA">@Strings.ColorLightGray</listEntry>
        	<listEntry value="0x555555">@Strings.ColorDarkGray</listEntry>
            <listEntry value="0x000000">@Strings.ColorBlack</listEntry>
            <listEntry value="0xFF0000">@Strings.ColorRed</listEntry>
            <listEntry value="0xFF5555">@Strings.ColorRed2</listEntry>
            <listEntry value="0xAA0000">@Strings.ColorDarkRed</listEntry>
            <listEntry value="0xFF5500">@Strings.ColorOrange</listEntry>
            <listEntry value="0xFFAA00">@Strings.ColorYellow</listEntry>
            <listEntry value="0xFFFF00">@Strings.ColorYellow2</listEntry>
            <listEntry value="0x00FF00">@Strings.ColorGreen</listEntry>
            <listEntry value="0x00AA55">@Strings.ColorGreen2</listEntry>
            <listEntry value="0x55FF55">@Strings.ColorGreen3</listEntry>
            <listEntry value="0xAAAA00">@Strings.ColorGreen4</listEntry>
            <listEntry value="0xAAFF00">@Strings.ColorGreen5</listEntry>
            <listEntry value="0x00AA00">@Strings.ColorDarkGreen</listEntry>
            <listEntry value="0x00AAFF">@Strings.ColorBlue</listEntry>
            <listEntry value="0x0055FF">@Strings.ColorBlue2</listEntry>
            <listEntry value="0x0055AA">@Strings.ColorBlue3</listEntry>
            <listEntry value="0x0000FF">@Strings.ColorDarkBlue</listEntry>
             <listEntry value="0xAA00FF">@Strings.ColorPurple</listEntry>
            <listEntry value="0xFF00FF">@Strings.ColorPink</listEntry> 
            <listEntry value="0xAA5500">@Strings.ColorBrown</listEntry>
        </settingConfig>
    </setting>

when I run the settings page, I will have twice the datalist

1 in the group (with common data)

and 1 at the end (with specific data) which does not affect if it is changed

So that means if you want to change a datafiled in a group with jungle,

you have to rewrite all the group, even if only 1 datalist has a changement.

Hope it will help

0 FlowState over 3 years ago in reply to MarkusGL

MarkusGL said:
Have you tried to use the "\n" to force the newline?

It's rendered as a literal "\n".

"" is ignored, "
" is treated just like a literal newline (also ignored), and "<br/>" is not allowed.

The newlines are def in the string, as evidenced by the following test.

Resource:

<string id="prop2Title">Numeric
Setting

Title\n
With
Newline
After
Each
Word
:(
</string>

Code:

System.println(loadResource(Rez.Strings.prop2Title));

Output:

Numeric\r
Setting

Title\n
With
Newline
After
Each
Word\r
:(