How To Create A Slider Dialog In Serenity (Part 1)

Introduce

Currently, at the point I write this post, the latest Sereity’s version is 3.9.8, Serenity just have 2 types of dialog,
they are a generic dialog (using jquery dialog) and panel dialog.

Generic Dialog

Panel Dialog

With Startsharp version, they also provide you a feature that you can open dialog directly on grid (side by side), it’s called Entity Grid Dialog

I personality want to use new style - a slider which I can open dialog directly from menu button on header (like open a Setting panel)

This post I will show you how to implement and use it to replace current dialog’s styles but you can also do it like I said if you want easily

Demo

Implementing

Okay, so how ? we will implement slider dialog using slideReveal library, firstly download and include it into project

Create MySlilerReveal.ts file and put it into ~/Modules/Common/Helpers

To replace current styles, just put this bellow code into your grid.ts file

That’s it!

Feel free to ask any questions :heart: