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 : ICON

Definition

In a division block, defines an ICON : inserts an attribute, a button, a url link

Reminder:

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




Syntax 1 : ICON + TEXT + STYLE


 ICON : (attribute 1 + attribute  2 +..) + VarIcon  ,   (optional)  " literal 1 your   text"  ;
 or
 <ICON : (attribute 1 + attribute  2 +..) + VarIcon  ,  
      <TEXT : (attribute 1 + attribute 2 +..) or " "," literal 1 your  text" >
 or	
ICON : (attribute 1 + attribute 2 +..) + VarIcon, style " color:xxx;background:xxx;font-size:Xxpx or rem"  ; 
>;

	

Example 1


	 		
 icon : $fa_1x + $fa_camera_retro , 
  
	
	

Example 2


	 		
<icon : $fa_1x +      $fa_camera_retro , 
  <text :"", "1x"	>>	;	
<icon : $fa_2x +      $fa_camera_retro , 
  <text :"", "2x"  	>>	;	
<icon : $fa_3x +      $fa_camera_retro , 
  <text :"", "3x"	>>	;	
<icon : $fa_4x +      $fa_camera_retro , 
  <text :"", "4x"	>>	;	
<icon : $fa_5x +      $fa_camera_retro , 
  <text :"", "5x" >>	;

	
	
	

Example 3


	 		
 <icon : $fa_5x + $fa_camera_retro , style:"color:red;background:MistyRose"  	>	;
  
	
	

Example 1 Output



Example 2 Output

1x 2x 3x 4x 5x

Example 3 Output





Syntax 2 : BUTTON + ICON + TEXT


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

Example 1


<button :   $Bts_btn_info    icon   :  $fa_5x +  $fa_address_book_o ,"Address"> ;
<button :  $Bts_btn_Success  ,icon   :  $fa_3x + $fa_pull_right + $fa_flag  ,"Font Awesome
right"> <button : $Bts_btn_Success ,icon : $fa_3x + $fa_pull_left + $fa_flag , "Font Awesome
left">

Example 2


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



Example 1 Output



Example 2 Output

Round Icon Buttons with Font Awesome Icons


Large Round Buttons


Extra Large Round Buttons






Syntax 3 : URL + BUTTON + ICON + TEXT (no attribute)


   	
   <URL :   " url"   , BUTTON : attribute, ICON : VarIcon, TEXT : " literal 1 your url text" >;

	

Example 3


 
<url : "http://facebook.com"      button :  $Bts_btn_social_facebook  ,icon :$fa_facebook  	 >;	
  		
    

Example 3 Output





Syntax 4 : BUTTON + ICON + STYLE + TEXT (attribute)


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

	

Example 4


	 		   

ICON BUTTON UI

Example 4 Output





Syntax 5 : URL + BUTTON + ICON + STYLE + TEXT


<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 :	"http://www.monday-software.com"
<button :  $Bts_warning_btn_circle_xl  , 
 <icon   :  $fa_pull_left + $fa_flag,   style:"color:blue;font-size:4rem"   , /*font size replace fa_2x */
   <TEXT :$Bts_Text_right_small  + $badge," / b    Monday \ n\ nSoftware   / b   "   >
  > 
 >
>; 
  		
    

Example 5 Output







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
- We based our main UIs on the widely known and distributed Font Awesome Icons
- The content of a responsive table may include all the MarkerDown abbreviations
Attributes that are currently included in includeChart.h:
$fa_0x
$fa_1x
$fa_2x
$fa_3x
$fa_4x
$fa_5x
, $fa_pull_left
$fa_pull_right
$fa_fw
$fa_address_book
$fa_address_book_o
$fa_address_card
$fa_address_card_o
$fa_adjust
$fa_adn
$fa_align_center
$fa_align_justify
$fa_align_left
$fa_align_right
$fa_amazon
$fa_ambulance
etc... included in includeChart.h and see also ; DRIVER:\MondaySoftware\MS4BI\02-DEMO-DESKTOP-BI-EXCELandSTANDARD\90-OTHERS-UI\1300-50-UI-IconButtonsList.ms4

UI ICON LIST

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