Scriptcase 9.4 has several new features to generated applications layout, you can apply the new themes when you are creating the applications and also in applications previously created by other versions of Scriptcase, making the screens more modern and elegant, in simple steps.
In this article, we will show you how to enable each of the new features released in Scriptcase 9.4.
(click on the links and access a tutorial of each of the new features)
|SweetAlert 2 / Toast
Button Group (Side by Side)
Export Excel with Subtotal
Watch the presentation video of the New Themes
Within the 9.4 release were added 5 new themes:
Sweet Golden Sand
You can use the new themes in the creation of a new project by adding duting a new project creation steps.
If you want to apply the new themes to projects previously created, you can edit and apply them according to the following steps:
Adding New Themes to the Project
1 - To add a new theme to your project, go to the top menu Project > Properties.
2 - Then, access the tab Themes.
3 - Select the themes you want to add and move them to the right side, where the themes available in the project are listed.
4 - In order to have the theme as default for next created applications, it is necessary to select it as default theme by selecting it and clicking on the Set a default theme button.
In order to save the new theme in the project, click Finish.
Applying the theme in the project applications.
Once you have added the themes to your project, you can now use the Express Edition option in order to apply it to all existing applications
5 - In the top menu go to Tools > Express Edition
6 -Then select the applications that will be edited.
7 - Select the property you want to change, in this example, we are changing the Theme, and click Next.
8 - Select the theme you want and click Apply.
All project applications will automatically have their theme changed to the selected one.
To finish, click Generate Source, to recompile the applications with the new theme. This is the final step, make sure you do not have any changes within the express edition, if you have one, you can do the source code generation at the end of all changes
Copying a theme
You can also use the themes created by Scriptcase as a template to create a customized one. In order to change a theme you will have to copy it.
1 - Access Layout> Applications CSS (Themes)
2 - In the list of new themes click Save As.
3 - After that, you will be shown the option to name the theme so that it can be edited.
Now you will be able to open your them and customize it. After that you will need to apply to the project or selected applications using the Express edit option.
Font Awesome is a font and icon toolkit. This feature was added to to release 9.4 and it enables the creation of smart icons within button templates. With them, we can add an extensive library of icons with the power to maintain resolution and styles inherited from your theme.
Using Font Awesome in buttons CSS.
When you edit or create a new button style in the Layout > Button CSS menu option, you can add the Awesome Font icons.
1 -Select the Text and Icon Awesome Font or Awesome Font Icon Only icon in the Display field.
2 - The Icon option will be displayed with the Awesome Font icons, select the desired icon for each button and save it. You can do a search by name on the icon or search by scrolling through the scroll bar.
3 - Finally save your new button theme and add within the application or theme you want.
The new version of Scriptcase also brings new button templates along with each theme launched, the new buttons receive the same name of the themes:
Sweet Golden Sand
Here's a video about the Button CSS
The new models are already available in the new themes also released in the new version, but you can also use them in any other theme already existing in your project.
To add the new templates you need to access the Layout > Applications CSS (Themes) option.
Then, by accessing the Edit option of your theme you will be able to access the Page option settings and select the desired button template.
Editing the new button templates
1 - To edit the new templates you need to access the Layout > CSS button.
2 - After accessing the option, you must click the copy option to be able to edit the layout.
3 - Now it is possible to choose the name for the new template and its level of access.
4 - After creating the new template, you can access the edit option to configure the style of the buttons.
5 - Accessing the button's edit will be made available all available settings.
Button Group Display
1 - By accessing the Scriptcase application toolbar, you can create a group of buttons by setting their display to "Dropdown" or "Side by Side".
To create a group of buttons, select two or more available buttons and click the "Add" button.
2 - The following is a modal for setting the group of buttons. Initially, it is opened as "Dropdown".
In the dropdown options there are different options to use:
Image: Allows you to select an image from the Scriptcase image manager.
If selected in Display the option to use Font Awesome icon only or Text and Font Awesome icon option the image option will be replaced by searching for Font Awesome icons.
Display: In this option can be set as the button will be displayed, the options are:
Text Only - Will display only one text.
Image Only - Only the image selected in the Image field will be displayed.
Text and Image - Both text and images will be displayed.
Font Awesome Icon Only - Will display the icon selected in the Icon option.
Awesome Font Text and Icon - Will display both text and icon.
3 - If you choose "Side by Side", this will be the visual of the modal configuration:
1 - Visit the link to access Google Fonts: https://fonts.google.com/
2 -Select the desired font.
3 - Copy the link that is inside the tag.
4 - Go to Layout> Application Css (Themes).
5 - After that, click Advanced Mode.
6 - To use Google Fonts in apps you must first add the Google font link in your theme.
7 - Click the "Change all theme fonts" button to edit all fonts in the project.
8 - A box will appear to add the font family to use and the selection of the button group to use in the theme.
With this option Scriptcase will change all fonts, including buttons, if you are using the default button template, if you are using a template you created, you can also select to change it with the new font you selected.
You can also use offline sources by simply using the source link and clicking Download.
SweetAlert 2 /Toast
In the new version of Scriptcase were added the options of Sweet Alert and Toast.
Toast relies on the sweet alert to change Scriptcase defaults and confirmation messages.
The new component will already be activated natively if new projects are created. To enable Toast and notifications with the new component in projects created in previous versions of Scriptcase you must enable the Use SweetAlert in applications option. Here's how to expressly change:
1 - To change in all project applications you need to use the express option in Tools > Express Edition.
2 - After selecting the options you can define whether SweetAlert will be used or not and the position where it will be displayed within the application.
3 - To activate SweetAlert in a single application, not expressly, simply go to Application> Settings> Use Sweet Alert.
With the active option it will replace the Scriptcase popup messages with the new sweet alert.
4 - You can also configure the message layout in the application by using the Scriptcase sc_alert message macro.
An example of how to show an error for the user using the macro can be seen below:
$params = array( 'title' => 'Title', 'position' => 'top-top', 'type' => ' error', 'timer' => '2000', 'confirmButtonText' => 'OK' ); sc_alert('An error has occurred',$params);
You can see the result of the configuration above in the image:
For more information about deploying with macros, you can access our documentation by clicking here.
To complete express editing, click Generate Source, causing all affected applications to have their source code generated. This is the final step, make sure you have no further changes within the express edit if so you can generate the source code at the end of all changes.
Export Excel with Subtotal
Within the query exports, we add to a progress bar, now in exports (XLS, WORD, CSV, RTF, and XML). In Excel type export we add the option to export with totalization.
1 - To enable the export with totalization option, go to Export> Exporting Types> Excel.
2 - Then position the Export with totalization on the right side to 'Activate'
You can manipulate the initial value of this option by changing the Enable Excel with Totalization option.