Support > Wagby Developer Network(R7) > Customize the screen > Screen customization with JSP, JavaScript, CSS
ja | en

I will explain how to correct the screen automatically generated by Wagby.

Modify JSP, JavaScript, CSS file that is bundled as standard or automatically generated.
The modified file is "Overwrite Save".The starting point of the destination folder is as follows.

customize\webapp

With this folder as the starting point, save the customized file according to the folder structure of the generated application.

Please be careful

If you change the model definition after customizing the automatically generated file, you also need to manually modify the customization file according to the added definition. For that reason we recommend that you customize the appearance after the structure of the model definition has been fixed.

How to replace files

The background image of the logon screen is provided as wagbyapp \ webapps \ wagby \ img \ logon_bg.jpg.

Prepare the file you want to replace as JPEG format image.Save this to the following location.

customize\webapp\img\logon_bg.jpg
Immediately after installation, up to customize \ webapp folder is prepared.Please make img folder yourself.

The standard css file is included in the wagbyapp \ webapps \ wagby \ css folder.When modifying the standard common.css, write only the part you want to change to mycommon.css and save the (modified file) in the following location.

customize\webapp\css\mycommon.css
Immediately after installation, up to customize \ webapp folder is prepared.Please make css folder by yourself.
The contents (CSS) described in mycommon.css apply to which "theme (claro, soria, tundra, nihilo)".If you want to specify for each subject, please modify the thematic file directly in wagbydesigner \ bin \ webpage \ css.In this case, it is necessary to reflect this modification each time Wagby's version upgrade is done.

Example Make the space between items in the list display black7.9

An example of changing colors between diagram items
@charset "UTF-8";

.display_label_list:first-child
{
  border-style:none;
}
.display_label_list
{
  border-style:solid;
  border-width:0px 0px 0px 1px;
  border-color:#000;
}

.display_field_list td:first-child,
.display_field2_list td:first-child,
.display_field_list_selected td:first-child,
.display_field2_list_selected td:first-child
{
  border-style:none;
}
.display_field_list td,
.display_field2_list td,
.display_field_list_selected td,
.display_field2_list_selected td
{
  border-style:solid;
  border-width:0px 0px 0px 1px;
  border-color:#000;
}

Modify wagbyapp \ webapps \ wagby \ tiles2 - base_classic2.jsp. It is a good idea to modify this file, such as css file or script tag for reading jquery.

Save the modified file in the following location and build it.

customize\webapp\tiles2-base_classic2.jsp

I prepare a (customized) js file called mycommon.js (empty). Write the code in this file and save it in the system folder.

customize\webapp\system\mycommon.js

By doing the build, the code written in mycommon.js will work on all screens.

Immediately after installation, up to customize \ webapp folder is prepared.Please develop the system folder yourself.

A file named MyXXX.js that is automatically generated is prepared.This is customized js file for each screen.Please use here. Save it under customize \ webapp folder.Here is an example.

customize\webapp\customer\MyShowCustomer.js
Immediately after installation, up to customize \ webapp folder is prepared.Please make a folder ("customer" in the above example) corresponding to model name yourself.

There is an automatically generated XXX_javascript.jsp file.You can put a script tag in it.
After correction, save it under customize \ webapp folder.Here is an example.

customize\webapp\customer\showCustomer_javascript.jsp
Immediately after installation, up to customize \ webapp folder is prepared.Please make a folder ("customer" in the above example) corresponding to model name yourself.