MS4BI HELP 2019

by MS4script
01-Introduction
Preface & Copyright
Getting started
Demos Simple
02- Declarations
Structure
Type
03- Instructions
Conditions if,do,while..
String functions Str..()
Get + Include functions Get, Include..
Date-Time Day, Time, Year.
Display
Call
Formulas Complex
04- Database
Connector Ado, Odbc, Dsn, SAP, Ms4
Connect DB Create, delete
Import DataSource Import, Consolidation
Administration Admin, User
05- Sql-Query
Sql
Query Form : BTS,SHOW
Grid option
06- Charts
Forms Show, Win, Image, Excel, Morris...
Pie Std, Donut, 3D...
Bar Std, Stack, Line, Area, Plot
Radar
QrCode, Gauge
Step, Stock...
,Google,Leaflet... GeoMap
,Gantt,Timeline,Org.
07- Dashboard
Form tab, no tab
Responsive UI
08- Report
Report Hierarchy
Report Design
09- Filters
Dialogue + Call
10- Menus
Menu Design
Menu Frameset
Menu Special
11-UI : Responsive
Tables Responsive,Frame,position
List Group
Text
Panel Header, body, Footer
Button Button, Progress Bar
Icon & Button
Collapse Group, Panel
Notifications
12- Encryption
Encrypt
Decrypt
13- Windows
Dialogue
Picture, Frame, Button..
MsgBox
Grid
14- Cloud.
Account Open
15- Css, html, Php, js.
Insert Native language Begin_sw..End_Sw
16-Install + tools.
Installation & Configuration This Menu
Generate Native... Php, Html, js..
Code Generator Ms4 Script
MarkDown Ms4 Script
Source Code Menu Help This Menu
written with ms4script
     

BASIC HELP : MS4BI by MS4script 2019 version 1

Chapter 11 : Responsive UI

KEYWORD : BUTTON

Definition

In a division block, defines a BUTTON : inserts an attribute, an icon, a url link

Reminder:

A division is represented by < open division ....> close division

Syntax 1


	 <button :   attribute   ," literal 1 your text" >;
 	  	
	
	

Example 1


 <button :   $Bts_btn_default   ,"Default">;
 <button :   $Bts_btn_success   ,"Success">;
 <button :   $Bts_btn_primary   ,"Primary">; 
 <button :   $Bts_btn_info      ,"Info">;
 <button :   $Bts_btn_warning   ,"Warning">;
 <button :   $Bts_btn_danger    ,"Danger">;
 <button :   $Bts_btn_link      ,"Link">;
	 
    

Example 1 Output

Normal Buttons


Disabled Buttons


Button Sizes


Block level button


Syntax 2


  <button :   attribute   , ICON : VarIcon >;
  or
  <button :   attribute   , ICON : VarIcon , " literal 1 your text" >;
	  	
	
	

Example 2


<button :   $Bts_default_btn_circle,  icon   :  $fa_check , text : "" >	;
<button :   $Bts_primary_btn_circle,  icon   :  $fa_list , text : "" >	; 
<button :   $Bts_success_btn_circle ,  icon   : $fa_link , text : "" >	; 
<button :   $Bts_info_btn_circle,  icon   :  $fa_check , text : "" >	;
<button :   $Bts_warning_btn_circle,  icon   :  $fa_times , text : "" >	;
<button :   $Bts_danger_btn_circle,  icon   :  $fa_heart , text : "" >	;  
		
    

Example 2 Output

Normal Round Buttons


Round Icon Buttons with Font Awesome Icons


Large Round Buttons


Extra Large Round Buttons



Outline Buttons


Outline Buttons with Smooth Transition


Outline Button Sizes



Social Buttons


Social Buttons with Font Awesome Icons



Syntax 3


  <URL :   " url"   , " literal 1 your url text" >;
or
   <URL :   " url"   , STYLE : "font-size:XXpx;color;red..", " literal 1 your url text" >;
or	  	
   <URL :   " url"   , BUTTON : attribute, TEXT : " literal 1 your url text" >;
or	  	
   <URL :   " url"   , BUTTON : attribute, ICON : VarIcon, TEXT : " literal 1 your url text" >;

	

Example 3


<url : "https://www.ms4bi.com"	,  " Link MS4bi.com" 	>;
<url : "https://www.ms4bi.com"    style  : "font-size:28px;color : red;" , text : "   MS4bi.com"	  >;	
<url : "https://www.ms4bi.com"    button :   $Bts_btn_danger   , text :  "  MS4bi.com"	 >;	
<url : "http://facebook.com"      button :  $Bts_btn_social_facebook  ,icon :$fa_facebook , Text : ""	 >;	
  		
    

Example 3 Output


Url & Link


simple url :

Link MS4bi.com

simple url + style :

MS4bi.com

simple url + button :


simple url + Button + Icon :




RESPONSIVE TABLE 2 (var)



Total messages Posts Comments
News Likes Notifications
Albums Groups Permissions

Syntax 4


 <button :  attribute  , 
  <icon   : (attribute 1 + attribute 2 +..) VarIconleft ,   style:"color:XXX;font-size:XXXpx or rem"   , 
      <TEXT :attribute,"your text ">
 	> 
  >;

	

Example 4


<button :  $Bts_btn_Success  , 
 <icon   :  $fa_3x + $fa_pull_left + $fa_flag,   style:"color:red;font-size:8rem"   , 
   <TEXT :"","  /R  ORDERS /n/n 12.856 /r  "   >
 > 
>;
  		
    

Example 4 Output



BUTTON + ICON + STYLE + TEXT

Syntax 5


<URL :  " literal url "   ,  	
 <BUTTON :  attribute  , 
  <ICON   : (attribute 1 + attribute 2 +..) VarIconleft ,   STYLE:"color:XXX;font-size:XXXpx or rem"   , 
      <TEXT :attribute,"your text ">
 	> 
  >
>;

	

Example 5


<URL :	
<button :  $Bts_btn_info  , 
 <icon   :  $fa_3x + $fa_pull_left + $fa_flag,   style:"color:blue;font-size:8rem"   , 
   <TEXT :"","  /R  ORDERS /n/n 12.856 /r  "   >
  > 
 >
>; 
  		
    

Example 5 Output



URL + BUTTON + ICON + STYLE + TEXT

Prerequisites

#includeSYSpathMS4BI "zInclude\includeChart.h"
- Customisation: all the attributes can be declared in "zInclude\includeChart.h" or another filename.h

Remarks

This example :
driver::\MondaySoftware\MS4BI\02-DEMO-DESKTOP-BI-EXCELandSTANDARD\90-OTHERS-UI
- We based our main UIs on the widely known and distributed Bootstrap conventions
- The content of a responsive table may include all the MarkerDown abbreviations
Attributes that are currently included in includeChart.h:
$Bts_btn_default
$Bts_btn_success
$Bts_btn_primary
$Bts_btn_info
$Bts_btn_warning
$Bts_btn_danger
$Bts_btn_link
$Bts_btn_default_disabled
$Bts_btn_primary_disabled
$Bts_btn_success_disabled
$Bts_btn_info_disabled
$Bts_btn_warning_disabled
$Bts_btn_danger_disabled
$Bts_btn_link_disabled
$Bts_btn_primary_btn_lg
$Bts_btn_primary_btn_xs
$Bts_btn_primary_btn_sm
$Bts_btn_danger_btn_sm
$Bts_btn_info_btn_sm
$Bts_btn_success_btn_sm
$Bts_btn_warning_btn_sm
$Bts_btn_default_btn_sm
$Bts_btn_xs
$Bts_btn_lg
$Bts_btn_sm
$Bts_primary_btn_lg_block
$Bts_default_btn_circle
$Bts_primary_btn_circle
$Bts_success_btn_circle
$Bts_info_btn_circle
$Bts_warning_btn_circle
$Bts_danger_btn_circle
$Bts_default_btn_circle_lg
$Bts_primary_btn_circle_lg
$Bts_success_btn_circle_lg
$Bts_info_btn_circle_lg
$Bts_warning_btn_circle_lg
$Bts_danger_btn_circle_lg
$Bts_default_btn_circle_xl
$Bts_primary_btn_circle_xl
$Bts_success_btn_circle_xl
$Bts_info_btn_circle_xl
$Bts_warning_btn_circle_xl
$Bts_danger_btn_circle_xl
$Bts_default_btn_outline
$Bts_primary_btn_outline
$Bts_success_btn_outline
$Bts_info_btn_outline
$Bts_warning_btn_outline
$Bts_danger_btn_outline
$Bts_link_btn_outline
$Bts_primary_btn_outline_btn_lg
$Bts_primary_btn_outline_btn_sm
$Bts_primary_btn_outline_btn_xs
$Bts_primary_btn_outline_lg_btn_block
$Bts_btn_social_block_bitbucket
$Bts_btn_social_block_dropbox
$Bts_btn_social_block_facebook
$Bts_btn_social_block_flickr
$Bts_btn_social_block_github
$Bts_btn_social_block_google_plus
$Bts_btn_social_block_instagram
$Bts_btn_social_block_linkedin
$Bts_btn_social_block_pinterest
$Bts_btn_social_block_tumblr
$Bts_btn_social_block_twitter
$Bts_btn_social_block_vk
$Bts_btn_social_bitbucket
$Bts_btn_social_dropbox
$Bts_btn_social_facebook
$Bts_btn_social_flickr
$Bts_btn_social_github
$Bts_btn_social_google_plus
$Bts_btn_social_instagram
$Bts_btn_social_linkedin
$Bts_btn_social_pinterest
$Bts_btn_social_tumblr
$Bts_btn_social_twitter
$Bts_btn_social_vk

See also

BEGIN_DIV : TABLE RESPONSIVE , POSITION :RELATIVE, POSITION :ABSOLUTE, PANEL, ICON, TEXT , LIST_GROUP , TABLE TROW,TCELL, NOTIFICATION, PROGRESSBAR;



KEYWORD : PROGRESSBAR

<div attribute (bootstrap)>

Definition

Defines a PROGRESSBAR (bootstrap) with attributes, %,... in a division block

Reminder:

A division is represented by < open division ....> close division

Syntax


 
 <div attribute	 :
   <div "style='width:XX%;' " or string +  attribute 1 + attribute 2..  
    >, /* end div */
 >, /* end div progress bar*/
	
	

Example 1


	 		   

Progress Bar UI

Example 1 Output

MS4BI : UI Progress Bar


Memory 10/200 GB
Bandwidth 20 GB
Activity 73%

Prerequisites

#includeSYSpathMS4BI "zInclude\includeChart.h"
- Customisation: all the attributes can be declared in "zInclude\includeChart.h" or another filename.h

Remarks

This example :
driver:\MondaySoftware\MS4BI\02-DEMO-DESKTOP-BI-EXCELandSTANDARD\90-OTHERS-UI
- The contents of a PROGRESS BAR may contain all the MarkerDown abbreviations.
Attributes :
$Bts_progress_small
$Bts_progress_bar

See also

BEGIN_DIV : TABLE RESPONSIVE , POSITION :RELATIVE, POSITION :ABSOLUTE, PANEL, ICON, TEXT , LIST_GROUP , TABLE TROW,TCELL, NOTIFICATION, PROGRESSBAR;

Interested in our project? contact@monday-software.com
The Monday Software team


Copyright 2020 by Monday Software

the official sites :
www.monday-software.com
www.ms4bi.com
demos.ms4bi.com
getms4bi.com
getms4bifree.com
cloud.ms4bi.com
cloud.testing.ms4bi.com
www.ms4script.com

Our purpose : Keep it simple !


written with ms4script
  • MS4BI v.01.0027.01.2020
  • MS4BIRE v.01.0021.10.2019
  • MS4SCRIPT v.01.0027.01.2020
  • help 06/2019

MS4BI in 5 minutes