Changing layout of the tree menu with event

Developers Hot tips
#1

Changing layout of the tree menu with event

ScriptCase has its own themes by default, so to help your design productivity. And that’s great, but not so the user is limited in customizing your own theme. It is possible to alter through events, events that are loaded with application. In this example I will use the onLoad event.

I am using as an example a standard tree menu created by the security module.

See the result in the below image.

Did you like? Now see how simple it is!

  1. In the event onLoad use the following code to change the CSS of the generated application.


?>
    <style>
        #css3menut{width:220px;}
        .jstree-container-ul jstree-no-dots jstree-wholerow-ul{width:215px;}
        .scMenuTTable{background-color:#fff !important;}
        .scMenuTItems{
            font-weight: bold;
            padding: 0px 10px 0px 10px;
            color:#fff !important;
        }
        .scMenuTSubItems {
            font-weight: normal !important;
            padding: 0px 10px 0px 10px;
            color:#333 !important;
        }
        .jstree-default .jstree-anchor{padding:11px;}
        .jstree-default .jstree-node {margin-left:0px !important;}
        .jstree-default .jstree-wholerow {
            height:30px !important;
            padding:23px;
        }
        .jstree-default>.jstree-no-dots .jstree-open>.jstree-ocl {margin-top:11.8px;}
        .jstree-default>.jstree-no-dots .jstree-closed>.jstree-ocl {margin-top:11.8px;}
        .jstree-wholerow-ul .jstree-wholerow{background-color:#598DB5 !important;border-right:1px solid #D8D8D8}
        .jstree-children .jstree-wholerow {
            background-color:#fff !important;
            border-width:1px !important;
            border-color:#D8D8D8 !important;
            border-style:solid !important;
        }
        .jstree-children .jstree-wholerow-hovered {background-color:#F1F1F1 !important;}
    </style>
<?php
  1. In the General Settings menu use this:
  • Menu width: 230
  • Expand Items: Yes
  • Hide the dotted lines of the menu: Yes
  1. In sub-items use in the configuration items, inform the label as follows:

Syntax: <span class=“scMenuTSubItems”>label</span>

Ej.:
<span class=“scMenuTSubItems”>Privileges Panel</span>
<span class=“scMenuTSubItems”>Show Users</span>
<span class=“scMenuTSubItems”>New User</span>
<span class=“scMenuTSubItems”>Show Departments</span>
<span class=“scMenuTSubItems”>New Department</span>
<span class=“scMenuTSubItems”>Change Password</span>

Note: The following images used in menu items and sub-items on the link below:
https://drive.google.com/folderview?id=0BwUe2zBbmuOhfmhjd3NpbHNybXc3RW9GdmtjSGJQSF9HbUlfT2dBNk9RN0ZBSEpyS0U2c0U&usp=sharing

Administrative admin-menu.png
Privileges Panel controlpanel-menu.png
Users user-menu.png
Show Users list-menu.png
New User form-menu.png
Departments group-menu.png
Show Departments list-menu.png
New Department form-menu.png
Profile me-menu.png
Change Password changepass-menu.png

treemenu_en.png

#2

Beautiful… +1

#3

So beautiful dude, congrats.

#4

Great! Thank you for sharing this.

#5

Great tip, thanks. i tried with SC 8.1.055 but it doesn?t work very well the header disappear i don?t know why[SIZE=12px] :([/SIZE]

#6

If your menu applications shows tabs then make sure to remove the quotation marks from the sub menu items.

Ej.:
<span class=scMenuTSubItems>Privileges Panel</span>

#7

Great post John!!

#8

Why do you remove the quotation marks?

#9

The Quotation marks show up in the Tab as text.

#10

Ah. Did not notice that. Thank you.

#11

I am working on mapping all SC classes to bootstrap 4 classes and then we could include this js file…

I would like to put on github…Anyone interested in contributing?

(Haven’t seen SC 9 yet though…So is it a waste of time?)

#12

It would be a great projet and I’ll be pleased to contribute , let me know …

#13

Hello,

Due to the update of the jstree component, which the tree-menu uses, this is the updated code for who is using in version 9:


?>
    <style>
        #css3menut{width:220px;}
        .jstree-container-ul jstree-no-dots jstree-wholerow-ul{width:215px;}
        .scMenuTTable{background-color:#fff !important;}
        .scMenuTItems{
            font-weight: bold;
            padding: 0px 10px 0px 10px;
            color:#fff !important;
        }
        .scMenuTSubItems {
            font-weight: normal !important;
            padding: 0px 10px 0px 10px;
            color:#333 !important;
        }
        .jstree-default .jstree-anchor{padding:11px;}
        .jstree-default .jstree-node {margin-left:0px !important;}
        .jstree-default .jstree-wholerow {
            height:30px !important;
            padding:23px;
        }
        .jstree-default>.jstree-no-dots .jstree-open>.jstree-ocl {margin-top:11.8px;}
        .jstree-default>.jstree-no-dots .jstree-closed>.jstree-ocl {margin-top:11.8px;}
        .jstree-wholerow-ul .jstree-wholerow{background-color:#34495E !important;border-right:1px solid #D8D8D8}
        .jstree-children .jstree-wholerow {
            background-color:#fff;
            border-width:1px !important;
            border-color:#D8D8D8 !important;
            border-style:solid !important;
        }
        .jstree-children .jstree-wholerow-hovered {background-color:#415972 !important;}
        .scMenuTItems > .jstree-wholerow {background-color:#fff !important;}
        .scMenuTItems > .jstree-wholerow-hovered {background-color:#CAE1FF !important;}
    </style>
<?php

Note: If some scrolling is created, increase the Menu Width in the application settings.