Eg:Changing the Color and text of fields dynamically in grid and editable grid view

Scriptcase 8 Discussion
#1

You can change the text and background colour of fields in grid and editable grid view applications by doing the following:
(I have used the sec_grid_sec_users application for this example)

Add the following link to the bootstrap css in onScriptInit of sec_grid_sec_users: (this works for For both Grid and Editable grid views)

[SIZE=13px]?>[/SIZE]
[SIZE=13px]<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel=“stylesheet”>[/SIZE]
[SIZE=13px]<?php[/SIZE]

Add the following code to the onRecord event of sec_grid_sec_users:

if({active} == “Y” )
{

 {active} = "&lt;label class='label label-success'&gt;Active&lt;/label&gt;";      // note that you can use the original field like so: [SIZE=13px]{active} = "&lt;label class='label label-success'&gt;[/SIZE][SIZE=13px]{active}[/SIZE][SIZE=13px]&lt;/label&gt;";[/SIZE]

} else{

{active} = "&lt;label class='label label-warning'&gt;Inactive&lt;/label&gt;";
}

Change the {active} field not to lookup values:

[ATTACH=CONFIG]n71195[/ATTACH]

Run the Application:

[ATTACH=CONFIG]n71193[/ATTACH]
The following screenshot uses the same procedure for an editable grid view. Note make sure you set the form field as a “label Field”,
and you add your script to change the text to the onLoadRecord event.
[ATTACH=CONFIG]n71196[/ATTACH]

Result:

[ATTACH=CONFIG]n71194[/ATTACH]

pic.jpg

pic2.jpg

pic3.jpg

pic4.jpg

1 Like
#2

Hi leonvz

Thanks for your examples. Looks good.

#3

my pleasure :slight_smile:

#4

Leonz: depending on your viewport settings, wide grids either get partially displayed (i.e. you need to scroll right to see other parts, including the border of the grid) or becomes too tiny to see on a mobile if it tries to fit the whole grid into the viewport.

With your approach with bootstrap, does the whole border of the container fit the screen and then allow you scroll right to see the remaining part of the grid?

Hope I’ve communicated clearly. :slight_smile:

#5

This may be a stupid question but i’ll ask it anyway lol

Where i will deploy the application the computer DO NOT have a internet connection due to security issues.

So if i put the bootstrap code in the header, will this be possible to use? So in other words do you need an active internet connection to run code refering to internet?
?>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel=“stylesheet”>
<?php

#6

Mike, The link to bootstrap executes client side so your server doesnt need internet access the client does.

but if you prefer, You can just download the bootstrap css and add it to a SC external library then add the tag to your application’s onScriptInit event:
<link href="[SIZE=12px]<?php echo[/SIZE][SIZE=12px] sc_url_library[/SIZE][SIZE=12px](‘prj’, ‘[/SIZE][SIZE=12px]name_of_your_library[/SIZE][SIZE=12px]’, ‘[/SIZE][SIZE=12px]path/[/SIZE]css/bootstrap.min.css[SIZE=12px]’);?>" [/SIZE]rel=“stylesheet”/>

btw if you scope the library as public, prj(project) in the link above becomes sys.

See this article: http://scriptcase.net/blog/importing…ry-scriptcase/

#7

@scriptcaser , I have not tested my approach with mobile apps and I would hazard to guess that it would function exactly the way the grid would without the addition of bootstrap’s css.

#8

Awesome post, did not know you need to use older versions of bootstrap, great tip. JQuery is actually already included , if you need it in custom controls.
my 5 cents, if you want to style numeric fields they have to be text. By the way, in sc9 you can use bootstrap 3.3.1 at least as Jquery was updated.