0. Root - CSS Variables
1. Resets
2. HTML Elements
2.1. Links
2.2. Images
2.3. Headings
3. Page Layout
3.1. Layout
3.2. Header
3.3. Layout Native - Header
3.4. Layout Side - Header
3.5. Menu
3.6. Layout Native - Menu
3.7. Layout Side - Menu
3.8. Menu - Header Logo
3.9. Menu - App Menu Link
3.10. Menu - App Login Info
3.11. Content
3.12. ThemeGrid_Container
3.13. Section
3.14. Login
3.15. iOS Scroll Bounce
4. Widgets
4.1. Inputs and TextAreas
4.2. Switch
4.3. Checkbox
4.4. Dropdown
4.5. Button
4.6. List
4.7. List Item
4.8. Table
4.9. Table - Sortable Icon
4.10. Table - Bulk Actions
4.11. Form
4.12. Upload
4.13. Button Group
4.14. Popover
4.15. Popup
4.16. Feedback Message
4.17. Radio Button
5. Providers
5.1. Flatpickr
5.2. NoUiSlider
5.3. Splide
5.4. VirtualSelect
6. Patterns
6.1. Adaptive
6.1.1. Columns
6.1.2. Gallery
6.1.3. Master Detail
6.2. Content
6.2.1. Accordion
6.2.2. Accordion Item
6.2.3. Alert
6.2.4. Blank Slate
6.2.5. Card
6.2.6. Card Background
6.2.7. Card Item
6.2.8. Card Sectioned
6.2.9. Chat Message
6.2.10. Flip Content
6.2.11. Floating Content
6.2.12. List Item Content
6.2.13. Section
6.2.14. Tag
6.2.15. Tooltip
6.2.16. User Avatar
6.3. Interaction
6.3.1. Action Sheet
6.3.2. Animate
6.3.3. Animated Label
6.3.4. Balloon
6.3.5. Bottom Sheet
6.3.6. Carousel
6.3.7. DatePicker
6.3.8. Dropdown
6.3.8.1 Dropdown Search
6.3.8.2 Dropdown Tags
6.3.9. Floating Actions
6.3.10. Input With Icon
6.3.11. Lightbox Image
6.3.12. MonthPicker
6.3.13. Notification
6.3.14. RangeSlider
6.3.15. Scrollable Area
6.3.16. Sidebar
6.3.17. Search
6.3.18. Stacked Cards
6.3.19. TimePicker
6.3.20. Video
6.4. Navigation
6.4.1. Bottom Bar Item
6.4.2. Breadcrumbs
6.4.3. OverflowMenu
6.4.4. Pagination
6.4.5. Section Index
6.4.6. Submenu
6.4.7. Tabs
6.4.8. Timeline
6.4.9. Wizard
6.5. Numbers
6.5.1. Badge
6.5.2. Counter
6.5.3. Icon Badge
6.5.4. Progress
6.5.4.1 Progress Bar
6.5.4.2 Progress Circle
6.5.5. Rating
6.6. Utilities
6.6.1. Align Center
6.6.2. Button Loading
6.6.3. Center Content
6.6.4. Margin Container
6.6.5. Separator
6.6.6. Pull to Refresh
6.6.7. List Updating
6.7. Advanced
6.7.1. Dropdown ServerSide
6.7.2. Dropdown ServerSide Item
6.8. Deprecated Patterns
6.8.1. Accordion
6.8.2. Button Loading
6.8.3. Carousel
6.8.4. Datepicker
6.8.5. Dropdown Search an Tags (Common)
6.8.6. Dropdown Search
6.8.7. Dropdown Tags
6.8.8. Flip Content
6.8.9. Gallery
6.8.10. Horizontal Scroll
6.8.11. Notification
6.8.12. Progress Bar
6.8.13. Progress Circle
6.8.14. Progress Circle Fraction
6.8.15. Section Index
6.8.16. Sidebar
6.8.17. Search
6.8.18. Submenu
6.8.19. Tabs
6.8.20. Tooltip
6.8.21. Video
7. Usefull Classes
7.1. a11y (Accessibility)
7.2. Colors - Brand
7.3. Colors - Neutral
7.4. Colors - Palette
7.5. Colors - Semantic
7.6. Colors - Others
7.7. Text
7.8. Typography
7.9. Border Size
7.10. Border Radius
7.11. Space - Margin
7.12. Space - Padding
7.13. Shadow
7.14. Box Width
7.15. Box Height
7.16. Display
7.17. Display - Flex
7.18. Display - Align
7.19. Images
7.20. Overflow
7.21. Visibility
7.22. Position
7.23. Position - Absolute
7.24. Miscellaneous
8. Screen Transitions
9. Keyframes - Animations
9.1. Animate
9.2. Button Loading
9.3. List Item
9.4. Feedback Message
9.5. Pull To Refresh
9.6. Miscellaneous
10. Service Studio Preview
Alpha numeric Regex:
$parameters.Number = (/[0-9]/.test($parameters.Password));
$parameters.CapitalLetter = (/[A-Z]/.test($parameters.Password));
$parameters.SmallLetter = (/[a-z]/.test($parameters.Password));
$parameters.SpecialChar = (/[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test($parameters.Password));
Email regex
var emailValue = document.querySelector("#"+$parameters.Input_Widget).value;
var emailRegex = /^[A-Za-z]+[A-Za-z0-9.]+@[A-Za-z]+[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
if (! emailValue.match(emailRegex)) {
//alert("Please enter a valid email address.");
$parameters.EmailwidgetMessage= "enter a valid email";
}
else{
$parameters.EmailwidgetMessage="";
}
if (emailValue.length >= 50) {
var key = event.keyCode || event.charCode;
if( key == 8 || key == 46 || key == 37 || key == 39) {
return true;
}
event.preventDefault();
return false;
}
spcce should not allow
var e = window.event || e;
var key = e.keyCode;
//space pressed
if (key == 32 ) { //space
e.preventDefault();
}
----------------------------------------------
pw mask unmask
var inputPassword = document.querySelector('.confirmpassword-show');
var typeInputPassword = inputPassword.type;
if(typeInputPassword === 'password')
{ inputPassword.setAttribute('type', 'text');}
else {
inputPassword.setAttribute('type', 'password');
}
------------------------
namekeydown
var value = document.querySelector("#"+$parameters.Input_Widget).value;
if (value.length >= 50) {
var key = event.keyCode || event.charCode;
if( key == 8 || key == 46 || key == 37 || key == 39) {
return true;
}
event.preventDefault();
return false;
}
namekeypress
if (!((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 97 && event.keyCode <= 122))) {
event.preventDefault();
}
mobile
var containerEle = document.querySelector("#"+$parameters.Input_Widget);
containerEle.value=containerEle.value.replace(/[^0-9]/g, '')
if(containerEle.value.length >=10)
{
containerEle.setAttribute("onkeypress", "return false");
}
else
{
if (containerEle.hasAttribute("onkeypress")) {
containerEle.setAttribute("onkeypress", "return true");
}
}
----------------------------------------------------------------------------------------------
var inputtxt=document.getElementById($parameters.InputId);
var phoneno = /^\+?([A-Za-z0-9]{1})\)?[-. ]?([A-Za-z0-9]{4})[-. ]?([A-Za-z0-9]{4})[-. ]?([A-Za-z0-9]{2})[-. ]?([A-Za-z0-9]{1})$/;
if(inputtxt.value.match(phoneno))
{
var match = inputtxt.value.match(/^\+?([A-Za-z0-9]{1})\)?[-. ]?([A-Za-z0-9]{4})[-. ]?([A-Za-z0-9]{4})[-. ]?([A-Za-z0-9]{2})[-. ]?([A-Za-z0-9]{1})$/);
$parameters.op = match[1] + '-' + match[2] + '-' + match[3]+ '-' + match[4]+ '-' + match[5]
return $parameters.op;
}
else
{
$parameters.op='';
return $parameters.op;
}
---------------------------------------------------------------------------------------------------
var stl;
if ($parameters.IsHideShow===true){
stl = 'revert'
}
else{
stl = 'none';
}
var tbl = document.getElementById($parameters.tableId);
var rows = tbl.getElementsByTagName('tr');
for (var row=1; row<rows.length;row++) {
var cels = rows[row].getElementsByTagName('td')
var colth=tbl.getElementsByTagName('th')
cels[$parameters.ColId-1].style.display=stl;
colth[$parameters.ColId-1].style.display=stl;
}
------------------------------------------------------------------------------------
Nagative value input
evt = (event) ? event : window.event;
var patt=/[^\d]/g;
console.log(evt.target.value);
evt.target.value = evt.target.value.replace(patt,'');
--------------------------------------------------------------------------------
OS notes
track entity to main flow will create crud and list
track entity to form will create list only
animate lable, animate can use for animation
css can inline and can create them usage style
diffdays, mondatory, datatype based design module under change common invalid msg
upload image need name and content(binary),can download image my passing onclick of button url
sign up can do it by track entity and can add variable manager name use it
slide right and left in mobile app
if get data from excel just them into data tab in OS
CRUD
create emp, type entites track it to entity diagram and map type to emp.
create form track entity form, create list, edit btn link navigate to next page ,create aggregate with filter id
go back to previous screen delete, delete all(by using loop and delete all)
can track tag for phonenumber in table
ctrl+N for add new attribute in entity
timeline can used to show one customer can have multiple comment so that we can go with timeline.
select and select all checkbox to table-
add new attribute to entity as isselect false and track entity screen.
add column with that is check box on change write login to get checked data.just loop and ge isselected value.
for select all - loop entity based isallselect var do select / unselect all records
popups in outsystems- customer can have multiple comments. just create screen crud and goto edit screen track comment list.
then create pop and local var for comment entity.
inside popup track comment entity use popup and comment var.
cascading or linked dropdown in outsystems-
customer can have multiple prod - when onchange product need to refresh customer dropdown
dropdown-
input param passing in between two screens
multiple file upload-