DataApp Studio - Code Screens Ultimate Front-end Customization

The power of customization of data apps screens.

DataApp Studio has been enabled to let developers work with really low code front-end customizations screens. In this article, we demonstrate as a reference how you can create really custom screens in your data apps.

Requirements

Is important to have advanced knowledge in the following development languages to understand easily this article:

  • Bootstrap 4
  • HTML 5
  • CSS 5
  • Jquery
  • JSON
  • Javascript

Adding a Code Screen in a DataApp

Once you are in your App in the DataApp Studio add a screen like the following image:

10301030

Once added the screen admin interface will be loaded and the following screen will be shown:

33603360

Where to the right we can see the code editor where we can add our screen custom code, and in the back we can see the render in real time of the screen.

Code Editor vs Script Editor

In the Code Screen you have 2 editors to work with, one is the default code editor used for front end customization and the layout of you code screen. This is the one shown in the following image:

14161416

And the script editor is accessible by pressing the following icon:

14201420

This will open the script modal where you may add Jquery or Javascript code directly as all your code will be loaded in a tag.

30403040

Adding Embedded Data Kube Models

One of the powerful functions of the Code Screen type is the use of Embedded Data Models based in your Pre-created Kubes in your work area. The workflow to embedded a Data Kube Model in your custom code is the following:

  • Open the DataApp Studio Data Insight Designer
  • Select the Kube to be loaded
  • Customize the loaded Kube to your personal needs
  • Generate the Embedded code
  • Copy the code and paste in your Code Screen Editor

To open the DataApp Studio Insight Designer use the following icon:

428428

Once the icon is pressed select the Kube to be loaded in the Data Insight Designer like the following screen shows:

10341034

Once on the new window please customize the Kube as you would like it loaded as the following image:

33523352

Once ready generate the embedded code by pressing the button "SHOW EMBEDDED CODE" of the following image:

964964

The embedded code modal will open, you may copy the full code by pressing the copy clipboard button.

10361036

With the code at the clipboard you may paste the code to the code editor in your Code Screen DataApp as for example:

14161416

Once this you may save your work and reload the preview pane to show the new changes.

📘

Save your work!

Remember to save your work always when working with DataApp Studio.

Relating DataApp Global Variables and Linking Screens to Code Screens

DataApp Global Variables let us send custom values between data app screens and embedded Kubes for advanced DataApp user experiences.

Adding Custom Filters

For adding custom filters we use DataApp Global Variables, so the code to convert any input tag to a global variable use:

<input data-dk-var-name="dk_var_custom_name" class="form-control" size="16" value="">

Adding Date and Date Range Filters

For adding date filters to your screen you may use the following code in your Code & Script Editors:

<div class="input-group input-group-sm date datetimepicker" data-min-view="2" data-date-format="yyyy-mm-dd">
  <input class="form-control" size="16" type="text" value="" data-dk-var-name="dk_var_DateFrom">
  <div class="input-group-append">
    <button class="btn btn-secondary" type="button"><i class="icon fa fa-calendar"></i></button>
  </div>
</div>
$(document).ready(function(){

    $("div.input-group.date").datetimepicker() ;
    
}) ;

📘

DataApp Global Variables

Remember to Add Corresponding DataApp Global Variables to your Embedded Kubes and your corresponding data-dkvar-name attribute at the input tag for applying the filters to them.

📘

Reload Embedded Kubes

You may use the function dk_app_code_renderAll() to reload all your embedded kubes in the Code Screen.

Bootstrap 4 Engine

You may use any of the bootstrap 4 tools in your screen to maximize the user experience, please refer the following online documentation for bootstrap 4 tools.