CRM App template nav menu visibility in the editor

UI Builder
1

I’m a newbie to backendless and started with CRM app to learn the tool. Right off I ran into an issue I can’t seem to navigate…
The main page is called the dashboard, which contains a side nav menu element called “aside”. I can find aside in the navigator and can even edit the settings. But I cannot for the life of me figure out how to make it visible in the main editor. Toggling ‘display’ does nothing. Clicking on the ‘eye’ in the navigator simply shows a an outline where it should be, but the element itself is not expanded, so it only shows up as a line. Any advice regarding how to navigate here would be appreciated.

2

Hello @al_S,

it would be helpful to know your app ID in order to help you.

Stanislaw

3

Well, it is just the free framework for now. I’ve built nothing on it. But my app id is 394E8DBE-C54F-DA03-FFB8-7A1581FB0000

4

Oops, use this one: 78E21B93-6FCB-F630-FF50-DCC5A639FF00

5

Simple way is to get to the ‘aside’ block settings and delete the class ‘aside’ in Classes. The Theme extension must have CSS code that ‘hides’ the block until called.

This app makes use of a lot of Theme extensions … as a fellow newbie I can tell you such apps are tough to ‘read.’ Will be interested to see if ‘team’ has a better/more efficient way of working with these demo apps that have a lot of CSS.

6

Hi, @Jim_Austin

Thanks for your suggestions! :grinning: Our suggestions almost the same as you offered.

Hi, @al_S
First, we need to figure out which class should be added. You can find it on the logic which was added to the on click menu. As we can see from here, we need to add the class aside__expand.

image
image1081×264 30.7 KB

In order to make the asyde visible in the Editor, we need just add the aside__expand class to the class list of the aside element:

image
image1382×866 109 KB

Regards,
Marina

7

Thanks Marina, makes sense and is more elegant than just deleting the ‘hiding’ class. To generalize, any ‘hidden’ component must have a class to make it visible.
To find that class,

  • run the app,
  • determine what component/event makes the hidden component visible, then
  • look at the logic for that event to determine that class,
  • add the class to Classes to make the component visible.

Sound right?

1 Like
8

@Jim_Austin Yes, sounds right.