Terminal - workspace with windows and tabs

Terminals allow you to organize the user's work in such a way that:

  1. It will work mostly on the same page with different widgets.
  2. The user himself determines the composition of his workspace, organizes the arrangement of blocks.

A terminal is a workspace divided into areas/panels (areas).

On each area, the user can place some widgets with control components: forms, tables, dashboards.

The user can:

  • move widgets around the panel,
  • collapse widgets,
  • change the size of widgets,
  • add new widgets to the panel and remove them from the panel
  • adding/removing terminal panels.
  • switch between terminal panels
  • rename terminal panels  

When changing widget parameters, they are saved in the database (moving, resizing) - during subsequent visits to the terminal, previously saved settings of terminal elements are displayed.

How to add a terminal to a page

Terminal Snippet:

<div class="as-terminal" data-code="terminal1" data-itemid="123"></div>

In the /terminals section, create a terminal with the specified code and configure it.

How to set up a terminal

Terminal management - /terminals

We create a new type of terminal - we set the code, the name and the list of roles that can access it.

Terminal setup procedure getOptions

Prescribe the GetOptions procedure. This procedure determines the primary settings when loading the user's terminal. Example: 

CREATE PROCEDURE [dbo].[term_developer_getOptions]
    @code nvarchar(64),    -- terminalType
	@itemID nvarchar(128),	  -- terminalItemID	
	@parameters ExtendedDictionaryParameter readonly,	  -- for future parameters
	@username nvarchar(256)  -- current user
AS
BEGIN	
	-- SELECT 1
	select 1 Result, '' Msg
    --'{"title": "111", "text": "222", "type": "warning", "icon": "fa fa-bars"}' NoTerminal 
    
    -- SELECT 2 Available widgets
    select 'Managing tables' name, 'cat2' catCode, 'fa fa-bars' icon, 'table' controlType, 'tables' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
    select 'Managing forms' name, 'cat2' catCode, 'fa fa-bars' icon,  'table' controlType, 'forms' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
    select 'Managing pages' name, 'cat1' catCode, 'fa fa-bars' icon,  'table' controlType, 'pages' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
    select 'Editing a table' name, 'cat1' catCode, 'fa fa-bars' icon,  'form' controlType, 'editTable' controlCode, '0'  defaultItemID, 1 canChangeItemID
    union
    select 'Editing a form' name, 'cat1' catCode, 'fa fa-bars' icon,  'form' controlType, 'editForm' controlCode, '0'  defaultItemID, 1 canChangeItemID
    union
    select 'Setting Management' name, 'cat1' catCode, 'fa fa-bars' icon,  'form' controlType, 'editSetting' controlCode, 'globalCSS'  defaultItemID, 0 canChangeItemID
    union
    select 'Admin Dashboard' name, 'cat1' catCode, 'fa fa-bars' icon,  'dashboard' controlType, 'forAdmin' controlCode, ''  defaultItemID, 0 canChangeItemID
     union
    select 'Editing a stored procedure' name, 'cat1' catCode, 'fa fa-database' icon,  'sp' controlType, 'falcon_search' controlCode, ''  defaultItemID, 1 canChangeItemID
          
    -- select 3 AvailableWidget catetories
    select 'Cat 1' name, 'cat1' code, 1 ord  
    union 
    select 'Cat 2' name, 'cat2' code, 2 ord  
    union 
    select 'Cat 3' name, 'cat3' code, 3  ord  
    union 
    select 'Cat 4' name, 'cat4' code, 4 ord  
    order by ord
END

Input parameters:

  • code - terminal code
  • ItemId - the passed ItemId (this parameter is needed in order to use the same terminal type for the user in different ways on different pages).
  • parameter - for future parameters
  • username - current user 

Output results:

SELECT 1 General settings

  • Result - if 0, the error result will be output in Msg
  • Msg - message
  • NoTerminal - JSON string with the fields title, text, type. If set, it displays a message in the terminal (for example, that there are no rights to use the terminal). 

SELECT 2 List of available widgets that the user can add

  • name - the name of the widget (will be reflected in the widget title on the panel).
  • code - category code from SELECT 3 (used to organize lists of available widgets by category in the widget add window)
  • icon - widget icon
  • ControlType - which component will be loaded - form, table, dashboard
  • control Code - the code of the component (for example, tables or forms).
  • defaultItemID - which ItemId will be loaded into the component by default
  • canChangeItemID - if 1, then the user in the widget has the option to select ItemId via the search (in the widget header).  

Procedure for issuing available itemIDs to change the ItemId in the terminal widget

The search procedure allows you to output a list of itemIDs when searching for values in the widget.

For example, a client card with ItemId = 5 is displayed in the widget. The user wants to see another client - at the top, through the search, selects the desired client.

Just to generate this list of available clients, this procedure is used.

CREATE PROCEDURE [dbo].[term_developer_search]
	@q nvarchar(64),
    @parameters ExtendedDictionaryParameter readonly,	  -- terminalCode, terminalItemID
	@controlType nvarchar(64),    -- form, table
	@controlCode nvarchar(128),	  -- table code, form code
	@username nvarchar(256)  -- current user  
AS
BEGIN	
	if(@controlType='form' and @controlCode='editForm') begin 
    	-- SELECT 1
    	select id Value, isnull(title, '') + ' - ' + code Text
        from as_forms where code like '%'+@q+'%' or title like '%'+@q+'%' 
        return 
    end 
	if(@controlType='form' and @controlCode='editTable') begin 
    	-- SELECT 1
    	select id Value, isnull(title, '') + ' - ' + code Text
        from as_crud_tables where code like '%'+@q+'%' or title like '%'+@q+'%' 
        return
    end 
	-- SELECT 1
	select 1 Value, 'Invalid control type or code' Text 
	
END

Входные параметры:

  • q - what the user typed in the search
  • parameters - contains terminalCode, terminalItemID
  • ControlType - component type (from, table, dashboard)
  • controlCode - component code (for example, form code)
  • username - current user 

Output parameters

SELECT 1

  • Value - value itemID
  • Text - the output text for the user (for example, the client's full name)

System elements

In the database, terminals are stored in tables with a prefix as_term_: 

  • as_term_types - types of terminals
  • as_term_terminals - terminals of certain users
  • as_term_areas - terminal panels
  • as_term_widgets - widgets added to the terminal panel
  • as_term_log - log of user actions with terminals

To migrate a component, you need to migrate all stored procedures with the prefix as_term_ and term_example and tables with the prefix as_term_.

When developing tables and forms designed for terminals, it should be borne in mind that all interaction occurs, if possible, without transitions to other pages: 

  • instead of going to separate pages, we open modal windows, subtables, tables/forms by the link.
  • instead of updating the page through a full reload, we use updating the page area through refreshContainer (for example, updating a specific widget). 

Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}

SQL-tool for creating personal accounts on the site

The essence of the approach and the history of the creation of Falcon Space
Web platform for creating personal accounts

Falcon Space Platform

This is a reduction in the cost of ownership

at the expense of fewer people to support

This is a quick change

while using the program

This is a modern interface

full adaptation for mobile devices

MS SQL web applications. Affiliate program for developers and web studios

You can develop on your own or collaborate with us on Falcon Space web development using only SQL and HTML.
See examples with SQL code
Platform documentation
Working on MS SQL Server
Note