New feature UniqueKey and major enhancements on Image handling + minor Typed enhancements. 

UniqueKey and UniqueKeyWith(...)

A common challenge is to give DOM elements unique IDs or classes, to use in JavaScript. In the past, we would have created an id="some-prefix-@moduleId" but this has a few drawbacks. 

• The code was never really clear - it always needed comments to explain what this is for


• When using inner-content, all these content-blocks would all be in the same Module - resulting in the same module ID


• combining these with other things to create unique-sub-keys was often done like id="some-prefix-@moduleId-@entityId" - this was even less clear


• when combining with strings - eg id="some-prefix-@moduleId-@someOtherKey" this could result in very long keys


• it wasn't possible to create keys which were based on even more complex objects

This is the new API which will help you:

• UniqueKey is a property on every (typed) Razor and Code file. Within the same content-block it's the same value, but different in different content-blocks. So it's an awesome replacement for Module.Id, just that it also works in Inner Content. 
  note that this is actually a shorthand for Kit.Key.UniqueKey.


• Kit.Key.UniqueKeyWith(object1, object2, ...) generates a unique key based on  the UniqueKey with additional parameters. It will always generate the same unique-key in the same content-block with the same parameters; but will create a different one on a page-reload.

This helps to create robust code and will be the method of choice for all standard apps from now on. 

Image and Image Metadata Enhancements

Images shown on the page using the Kit.Image.Picture(...) method automatically add a toolbar which lets the editor add descriptions, crop settings and more. This was enhanced in many ways:

• In the new typed mode, you can now do MyItem.Picture(fieldName, ...) which is just nicer and shorter.


• The toolbar can now be overriden with another toolbar, or you can disable it.


• You can now also place the toolbar on another tag - eg. a figure-tag which is around the picture tag using the objects .Toolbar() method. This will be demoed in the new Gallery App.


• In the image metadata the editor can now also set a checkbox if you want to force an empty title


• The metadata also has a new DescriptionEnhanced property which is HTML for extensive descriptions, typical in a lightbox use.


• Previously you were only able to set descriptions and cropping for images which belonged to the current entity. This is because users may not be aware of the fact, that their changes could have a broader effect. Now you can do it on all images, but will see a warning that this image is shared. 


• The Kit.Image.Picture(...) was enhanced so that it can receive other objects such as IFile objects as well.


• Images edited in Rich-mode will now also look good in the edit-ui after importing into another site. 


• A bug which affected Safari on small image resizes was fixed

Other Typed Code Enhancements

• App.Folder.Url replaces the previous App.Path to make it clearer what this is


• View.Folder.Url replaces the previous View.Path to make it clearer what this is


• App.GetQuery(...) replaces the App.Query[...] because it allows for more parameters which can do amazing stuff 🤘🏽


• All typed objects now have ContainsKey(...), IsEmpty(...) and IsNotEmpty(...) methods, which also support paths eg. IsEmpty("Child.SubChild.Name").

Oqtane Enhancements

Most enhancements are around improving indexing in Google, such as adding CSS files in Pre-Render mode and better support for title-changes (head HTML).

TL;DR

There's a lot more, incl. some bugfixes.
Hope you love it, get it now from the GitHub releases.