DecSoft App Builder

Runtime selectors

Sooner or later you need to refer in runtime to some specific app view, app dialog, app frame or app control, so you need to know the selectors that you can use in both JavaScript and CSS, in order to refer to the wanted element, so you can perform some JavaScript operation and apply some CSS style rules to that element.

Runtime selectors

App views and dialogs
App frames and Frames controls
App controls
App controls inside app frames

App views and dialogs

All the app views and dialogs are inside an HTML DIV container with the .app-view and .app-dialog classes, respectively. On the other hand, the referred DIV container has an ID attribute value equals than the contained app view or dialog name.

Then, suposing that your app has a view with the name "mainView", you can refer to the view's DIV container element with the ID: mainView, for example:


// Attach an event to "mainView"

$('#mainView').on('click', function () {
  // Your click event handler code
});


/*
 Set the "mainView" background color to red
*/

#mainView {
  background-color: red;
}


// Attach an event to all the app views

$('body').on('click', '.app-view', function (event) {
  // Your click event handler code
});

// Attach an event to all the app dialogs

$('body').on('click', '.app-dialog', function (event) {
  // Your click event handler code
});


/*
 Set all views background color to red
*/

.app-view {
  background-color: red;
}

/*
 Set all dialogs background color to red
*/

.app-dialog {
  background-color: red;
}

App frames and Frame controls

The case of the app frames is different than the app views and the app dialogs. As may you already know, the controls of the app frames are placed inside one or more Frame controls, then you can use the Frame control name as the selector of the app frame container.

Then, suposing you have an app view with the name "mainView", and, inside that view, you have a Frame control with the name "myFrame", showing an app frame inside, you can refer to the Frame control / app frame container like below:


// Attach an event to all the the frame control / app frame container

$('#mainView #myFrame').on('click', function (event) {
  // Your click event handler code
});


/*
  Set the background color red to the frame control / app frame
*/

#mainView #myFrame {
  background-color: red;
}

The "#mainView" prefix is required, since the app can have, in another app view or app dialog, others Frame controls with the name "myFrame".

App controls

All the app controls can be referred from JavaScript and CSS code using their name prefixed by the name of the app view or dialog that contains the control. Thist last is required, because DecSoft App Builder allows to use the same name for controls contained in different app views, dialogs or frames.

Then you can refer, for example, to a "button1" Push button control, placed in an app view with the name "mainView", like below:


// Attach an event to the "button1" control

$('#mainView #button1').on('click', function (event) {
  // Your click event handler code
});


/*
  Set the background color red to the "button1" control
*/

#mainView #button1 {
  background-color: red;
}

App controls inside app frames

The app controls placed in app frames cannot be reached by identifiers. This is because you can show the same app frame (and therefore the same controls) in different Frame controls, inside the same app view or app dialog, but the HTML identifiers must be uniques.

To reach app controls placed inside app frames, and therefore inside Frames controls, you can take the controls names and use classes instead of identifiers. Remember to prefix the control name / class with the name of the Frame control's that show the app frame, that contain the control.


// Attach an event to the "button1" control inside a "myFrame" Frame control

$('#myFrame .button1').on('click', function (event) {
  // Your click event handler code
});


/*
  Set the background color red to the "button1" control
*/

#myFrame .button1 {
  background-color: red;
}