Examples on using the KTL - keywords and code

[cortexrd]

Hi to all,

Nothing's better than a simple, straightforward example to help understanding how to use the multitude of KTL features.
Here you will find a lot of code snippets and keywords strings in frequent use cases, or in response to specific questions from the users.

You need assistance on something? Feel free to ask!

Note: it is strongly recommended that you subscribe to this discussion to get to see all those great tips and tricks that could really help you.

Normand

[cortexrd]

Adding or Removing Classes

Keyword: _cls

Adding a Class

Goal: to make all tables in a page single line, i.e. no word wrap, to prioritize vertical space at the expense of horizontal scrolling once in a while.

Add this to the any of the view's title or description:
_cls=[ktlSingleLineTable], [ktlTarget,.kn-table]

This means "Add the class ktlSingleLineTable to all the tables in the page."

The ktlTarget is a special "selector" keyword that does the job of adding the class to only (and all) the elements having the kn-table class.

The ktlSingleLineTable is a KTL's built-in class found in the KTL.css file.

Removing a Class

If you want to remove an existing class, then add an exclamation mark in front of the class.

_cls=[!ktlSingleLineTable], [ktlTarget,.kn-table]

Norm

[cortexrd]

How to make a high-density display

Sometimes, all what matters is the sheer amount of data that you can "cram" in a single page.

This happens a lot in an industrial environment, where huge 4K dashboards in Kiosk Mode show the production statistics in real-time.

If you combine the high-density text with appropriate colorizing (see the _cfv keyword), you can get really nice displays, still readable and highly informative.

By default, Knack likes to leave a lot of "empty" space around the tables and views in general, in order to let the display "breathe", which is perfect in 95% of the case.

If you need to jam pack everything and let the views extend all the way to the edge of the screen, you need this line in any of the view's title or description:

_cls=[ktlNarrowMarginsPage], [ktlTarget,page]

Then to make all tables very compact by reducing the margin around text, use this:

_cls=[ktlDenseGrid], [ktlTarget,.kn-table]

Norm

[cortexrd]

Using the ktlTarget selector with keywords

The ktlTarget optional selector is an additional option to the KTL's keyword mechanism.

It is never used alone, but rather as a complement to a keyword.
Currently, just a couple of them support it, but more will be added over time.

Supported keywords:
_zoom
_cls

Let's consider a simple example to better understand.

Without ktlTarget

When a keyword is used alone, without the ktlTarget, then the effect is applied to the view where it is used.
_zoom=130
Will magnify this view at 130% or 30% larger.
In this case, the square brackets [ ] are not required.

With [ktlTarget, page]

The "page" option is a special token that indicates that the keyword applies to the whole page. This is the same as using the ".kn-content" selector.
_zoom=[75], [ktlTarget, page]
This will zoom out the whole page to a smaller 75%, usually to fit more data.
The square brackets [ ] are now required, since we have two groups of parameters.

With [ktktlTargetSel, scene]

The "scene" option is a special token that indicates that the keyword applies to all views in the page. It's similar to the page selector, but excluding the menu. This is the same as using the ".kn-scene" selector.
_zoom=[75], [ktlTarget, scene]
This will zoom out all views in the page to 75%.
The square brackets [ ] are now required, since we have two groups of parameters.

With [ktlTarget, cssSelector]

The "cssSelector" option is a qualified CSS selector.
_zoom=[110], [ktlTarget,.kn-table]
This will enlarge all grid views in the page by 10%.
The square brackets [ ] are also required, since we have two groups of parameters.

Note: In the examples above, the ktlTarget group is placed at the end of the string, but it can be placed anywhere. The syntax supports complex selectors that include spaces and commas, like this:
_zoom=[110], [ktlTarget,#view_110 .kn-table, #view_111]

Norm

[cortexrd]

Find all your keywords

As you will use more and more keywords in your app, it will become harder to remember where they are used.

There's built-in utility in the KTL that lists or searches all keywords in your app.

When the app runs, open the console (F12) and type this:

ktlkw()

It will find all occurrences in all views, scenes or fields, where a keyword exists.
You will also be provided with a direct link that will open the Builder at that page.

You can also provide a string parameter that will filter results with only entries that contain that word:

ktlkw('zoom')

Enjoy,
Norm

[cortexrd]

Hi Ampurcell, Thanks for sharing your use case, it's very interesting. Now, for some reason I can't see your message in the github page. Can you post again please? I need others to see it too. Actually, post it in the *Issues* section this time. Cheers, Normand Defayette Cortex R&D Inc. ctrnd.com

…

On Wed, Aug 2, 2023 at 12:40 PM Ampurcell ***@***.***> wrote: Hello, great toolkit. I have been using it a lot! But I am struggling with one. Essentially I have a grid with a column that could contain data with a lot of text. I don't want to get rid of the column, but I wanted a way to reduce the text. Reducing the width of the cell with Knack's built-in options just made it very tall. I would like to make it so an icon shows instead of the text IF text is present. Then if I click to use inline editing, it expands, and I can edit the data easily. I was hoping I could do this with the _cfv call. But I am struggling. The first screenshot is what the grid currently looks like. The second is what I would ideally like it to look like. [image: Screenshot 2023-08-02 at 12 19 30 PM] <https://user-images.githubusercontent.com/141195753/257878534-82c9181f-1097-4605-b58c-e0b977857556.png> [image: Screenshot 2023-08-02 at 12 38 25 PM] <https://user-images.githubusercontent.com/141195753/257882323-aeb293a7-6848-4ca6-868e-04ba6f0267b3.png> — Reply to this email directly, view it on GitHub <#50 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKG5YHZ4P3M5HMDOLRZZIULXTJ7HTANCNFSM6AAAAAAZBUC4VE> . You are receiving this because you authored the thread.Message ID: <cortexrd/Knack-Toolkit-Library/repo-discussions/50/comments/6618886@ github.com>

[djbbiz]

Hey Norm you sent this t the wrong email! Not me Dean From: Cortex R&D Inc. ***@***.***> Sent: Friday, August 4, 2023 2:20 PM To: cortexrd/Knack-Toolkit-Library ***@***.***> Cc: Dean Bozzano ***@***.***>; Manual ***@***.***> Subject: Re: [cortexrd/Knack-Toolkit-Library] Examples on using the KTL - keywords and code (Discussion #50) Hi Ampurcell, Thanks for sharing your use case, it's very interesting. Now, for some reason I can't see your message in the github page. Can you post again please? I need others to see it too. Actually, post it in the *Issues* section this time. Cheers, Normand Defayette Cortex R&D Inc. ctrnd.com

On Wed, Aug 2, 2023 at 12:40 PM Ampurcell ***@***.***<mailto:***@***.***>> wrote: Hello, great toolkit. I have been using it a lot! But I am struggling with one. Essentially I have a grid with a column that could contain data with a lot of text. I don't want to get rid of the column, but I wanted a way to reduce the text. Reducing the width of the cell with Knack's built-in options just made it very tall. I would like to make it so an icon shows instead of the text IF text is present. Then if I click to use inline editing, it expands, and I can edit the data easily. I was hoping I could do this with the _cfv call. But I am struggling. The first screenshot is what the grid currently looks like. The second is what I would ideally like it to look like. [image: Screenshot 2023-08-02 at 12 19 30 PM] <https://user-images.githubusercontent.com/141195753/257878534-82c9181f-1097-4605-b58c-e0b977857556.png> [image: Screenshot 2023-08-02 at 12 38 25 PM] <https://user-images.githubusercontent.com/141195753/257882323-aeb293a7-6848-4ca6-868e-04ba6f0267b3.png> — Reply to this email directly, view it on GitHub <#50 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKG5YHZ4P3M5HMDOLRZZIULXTJ7HTANCNFSM6AAAAAAZBUC4VE> . You are receiving this because you authored the thread.Message ID: <cortexrd/Knack-Toolkit-Library/repo-discussions/50/comments/6618886@ github.com>

— Reply to this email directly, view it on GitHub<#50 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APLX7BC3UFOL6WBEVBGPI7TXTVRQPANCNFSM6AAAAAAZBUC4VE>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.******@***.***>>

[cortexrd]

How to disable the spinner watchdog for a specific scene?

The spinner watchdog is a timer that checks if the spinner animation is visible. You often see the spinner when you change scene, refresh a view or submit a form. If that goes beyond 60 seconds, the page is reloaded as the default behavior.

Sometimes, you don't want that. To see how to do it on a per-scene basis, see this issue:
https://github.com/cortexrd/Knack-Toolkit-Library/issues/103

You might be interested to know that you can also:

1. disable the spinner watchdog completely
2. increase/decrease its value
3. override the the spinnerWatchDogTimeout function to handle a timeout with your own code, if a refresh doesn't work out for you.

Hope you find this useful,
Norm

[cortexrd]

How to toggle grid columns visibility on-the-fly?

Ever wanted to be able to toggle the visibility of a set of columns in a grid view with a dynamically added button?
It's very easy. See this post: #109

Enjoy,
Norm