How can I display header conditionally ?
example pseudocode would look like this
IF Var1=0
showImage1
ELSEIF Var1=1
showimage2
ENDIF
Arthur
It might need coding server-side and client-side.
Inside scriptcase it will depends if your element is created by scriptcase or if it is a custom element you wrote in the code / form / grid / etc.
Example 1 :
At server-side, when php process the app you are calling you can just check the value on php and dynamically write the html code.
echo {$var} == x ? '<img href="blablabla" />' : '';
Use the ternary operator if you have only two options OR a switch case if you have multiple options to check
[B]switch[/B]($var)
{
[B]case [/B]'x': echo 'htm code 1 here'; break;
[B]case [/B]'y': echo 'htm code 2 here'; break;
/*... it keeps going */
}
This example is different from the first, in this one, the element will always be present on the page, and you will be able to hide / show at your whim.
Example 2:
You use php to dynamically write at the style of the element to hide or show the field at the moment php is processing the page.
To show / hide your element you’ll need a javascript function that will call the divs id “custom_div_id” and apply the effect to show or hide it.
[B]?>[/B]
<div id="custom_div_id" style="[B]<?=[/B]$local_or_global_variable_from_php === 1 ? 'display:none;' : ''[B]?>[/B]">
<img src="[B]<?=[/B]$dynamic_path_to_your_image_folder[B]?>[/B]image_test.png"/>
</div>
[B]<?php [/B]
For more or better examples you need to clarify what are you trying to achieve.
Can you please explain more what you mean by “server side” ? I’m confused where your sever code supposed to go ?
I also do not know where am I supposed to put SC code ? I do not see any events for headers
Arthur
Arthur-
Try inserting this in OnApplicationInit:
if ([var1] == 1) {
// Hide header
?><script type=“text/javascript”>
$( document ).ready(function() {
$("#sc_grid_head").hide();
});
</script><?
}
This works for a grid, but the selector (#sc_grid_head) may need to be different depending on the application you are using. By inspecting the header, you can find the id reference.
Cheers,
Brad
Example 2 goes to the HTML template you set as header. First example is to define the image will be used.
Could be interesting to know exactly what you try to do. You can define “fields” on your template too, and control from SC UI.
In order to get a better help, you need to clarify what are you trying to do.
Anyway, i’ll explain below more less the difference of server-side (back-end) and client-side (front-end) coding.
Server-side in this case is the PHP language. It will be processed when the page is loading.
It will be processed by your host (server) and is a “safer” way to do your coding.
You can code to print something in the screen while testing your variables (anything you set in the session or globals. Data from your database, etc).
Front-end coding in this case will be javascript.
It will be processed client-side on the user’s browser.
In general you will use the front-end to manipulate elements while the user is using your page.
Show / hide some fields.
Send parameters to the server (some ajax call).
Drag and drop stuffs.
Accordion.
People often use jQuery to help the front-end coding.
Scriptcase deploys it on the generated apps already.
Giu - I would love to see some example how the template variables are handled. Do you have any ?
Arthur
OK, I"m sorry for not being precise enough. As you see my pseudo code in the first post, this is all correct although my intention is to have variable images in the project header (not the App header). Another words I want to change images based on some global variable (no matter what App is opened). So for example if I have a top (vertical) menu I want to be able to call Apps through the menu but independant of the App open modify the TopMenu header with appropriate image. I hope this is clear. I assume that the implementation would be the same.
bradk - your example
[I]
?><script type="text/javascript">
[/I]
is very generic. How would I use JS to display image in SC ?
Arthur
With JS/jQuery/otherlibs you can modify the DOM of the webpage in realtime.
I’m not in front of my PC, I speaks from memory…
On a HTML template header, you can have something like
<img src={myimage} />, then, on layout, a new param appears for you, wherre you can for example assign to a global [gloImage], for example.
In your application init event, you can give value to [gloImage] and template will take it.
But…the problem I see reading you, is thath you want to do it on a menu, but a menu don’t refresh when change over it’s items.
The way you have to go, is using JS to modify it. In you HTML template, create just a <div id=placeformyimage></div> ini your HTML template.
Then, onExecute of menu, you can catch wich menu was pressed with sc_menu_item and based on the item, throw a JS call modifiying DOM where you want, something similiar to:
sc_ajax_javascript(‘changeImage()’)
And on your JS programming, you create a funcion called changeImage with this code
var img = new Image();
var div = document.getElementById('placeformyimage');
img.onload = function() {
div.appendChild(img);
};
img.src = 'path/to/image.jpg';
I hope I understood you correctly.
OK, this was quite constructive post, thanks. Let me chew on it and I will probably get back with some questions.
For now the one I have, is about your statement:
<img src={myimage} />, then, on layout, a new param appears for you
so where actually this appears ?
Also - I do not need to change the image based on an item selected but rather based on some global variable. Another words if in “onScriptInit” event I have some code that modifies global Var I want based on the Var modify an image in the header. I’m not really sure if there is any way to make a menu refresh-able (ie. so it updates every few seconds) same way you can do with the grid. If this would be possible then the challenge is resolved.
Arthur
If the header space is not an issue and you just want to show\hide an image inside it, can’t you use [image_var] inside the header and conditionally populate or reset the [image_var] variable when calling the app or in the app events?
@aka
In this case try to follow Giu’s solution.
If the image will change based on a php global variable then you just need to put in header the code you quoted and its pretty much it.
You just need to add all the extra images you need on the app.
Example: Menu > Application > Config
You’ll be able to add more images for your app here.
Cavadinha - I understand that part. The issue is with the Menu. I do not know how to make a Menu (or rather header) refresh every time the global variable change. Any idea on how to do it ?
Maybe.
In advance I can tell you if it is an action via one of the linked apps you got inside your menu, lets say a form or grid.
If they are refreshed AND if you could check this same variable on those apps there are linked to the menu, then you could just make a parent call to manipulate the “img” object.
What I can say for sure is: It is possible and it probably have multiple ways to be done.
But I can’t help you any further without specific information.
I will try to make a little tutorial that will help a lot of the users and maybe it will help you too.
Link: http://www.scriptcase.net/forum/forum/developers/programming/64148-manipulating-images-in-the-menu-based-on-the-clicked-item
But remember that there are a lot of consultants here in this forum that might help you, just look for the most active members.
Yes, this helps and your tutorial is really great - thanks.
My need is a bit different (but close). I saw other members on the forum asking similar question. Often we need to have some indication of something that happens within the project. For example number of certain records in certain table. It could be status of some variable (ie. ON/OFF), could be logged user etc.
I managed for example displaying a logged user name but I have a need to display some other data. The problem is that I need the menu header or footer to show the information either when it is changed. Let me give an example here.
Say I have a table with the record holding last update date. The column is for example TIMESTAMP type. I want to display the latest date and time when the record was updated and I want menu to check for the update in loop so no clicking is necessary to see the change. Another example might be a variable that shows number of current records in a table. If (using another project or interface) number of records changes the menu would automatically update the variable and refresh it to show current value. As I said earlier this is similar scenario to showing/refreshing a grid but doing this in the menu instead.
ARTHUR
Hi ARTHUR
I found a solution for your problem, cause I did have the following issue:
Inside the menu bottom line, I wanted to show the info, when (what time) the active Session is expired. This expired date should be refreshed every time when the user clicks anything in the menu. In my case every menu opens a new tab (but doesnt matter for this example).
Solution overview is:
After the user logged in, I do set the footer line to the desired content: Logged in as: admin(Administrator) at 3:37 pm, Session expires at: 04:01:55 pm
When the user clicks a menu item, I do refresh only all text which is after at: I do this by calling an external PHP-file, which is called by AJAX. Problem was that the Menu in SC is not supporting Ajax, so I had to find a solution for this.
What you have to do to achieve this refreshment:
- Menu, Layout, Header and Footer: ROD_LIN1_COL2, Value, [footer_bottom_line_right]
- Menu, onApplicationInit:
$session_will_expire_at = date(“h:i:s a”, time() + ini_get(‘session.gc_maxlifetime’));
[footer_bottom_line_right] = “Logged in as: " .[usr_login] .”(" .[group_name] .") at " .[login_time] .", Session expires at: " .$session_will_expire_at; - Menu, onLoad: I add JavaScript, which will calls the PHP file by Ajax everytime when the user clicks on a Menu item. I am searching for the Element ‘rod_col2’, get the current content, make the Ajax call and modify the current line
?>
<script>
window.onload = function() {
$(document).on(‘click’, ‘li > a’, function() { /* calls this function whenever an “a” object inside a “li” object is clicked /
changemyfooter(this.id);
});
};
/ links each menu item to a different image, in case your “id” is empty or does not exists it does */
function changemyfooter(id_menu)
{
var span = document.getElementById(“rod_col2”);
var current_content = document.getElementById(“rod_col2”).innerHTML;
current_content = current_content.substring(0, current_content.indexOf('at:')+3);
// Call Ajax to adjust the line
$.ajax({
url:'../get_footer.php',
complete: function (response) {
span.textContent = current_content + response.responseText;
},
error: function () {
span.textContent = 'There was an error calling the function';
}
});
}
</script>
<?php
- I create a PHP-file as follows, the file I put inside the main folder of my Project: (not inside the Menu-folder, cause it will be deleted, once you generate the App)
File get_footer.php:
<?php
echo date(“h:i:s a”, time() + ini_get(‘session.gc_maxlifetime’));
?>
This solution works, but its not an elegant solution of course. Especially cause the additional file “get_footer.php” is not managed by Scriptcase
If anyone has an idea how to put that file into ScriptCase, would be fine. I did upload the file to the internal Libraries, but then I dont know where I can find it, i mean what is the URL to access it
Hope it helps you
[h=1]Hi ARTHUR
I found a solution for your problem, cause I did have the following issue:
Inside the menu bottom line, I wanted to show the info, when (what time) the active Session is expired. This expired date should be refreshed every time when the user clicks anything in the menu. In my case every menu opens a new tab (but doesnt matter for this example).
Solution overview is:
After the user logged in, I do set the footer line to the desired content: Logged in as: admin(Administrator) at 3:37 pm, Session expires at: 04:01:55 pm
When the user clicks a menu item, I do refresh only all text which is after at: I do this by calling an external PHP-file, which is called by AJAX. Problem was that the Menu in SC is not supporting Ajax, so I had to find a solution for this.
What you have to do to achieve this refreshment:
- Menu, Layout, Header and Footer: ROD_LIN1_COL2, Value, [footer_bottom_line_right]
- Menu, onApplicationInit:
Code:
$session_will_expire_at = date(“h:i:s a”, time() + ini_get(‘session.gc_maxlifetime’));
[footer_bottom_line_right] = “Logged in as: " .[usr_login] .”(" .[group_name] .") at " .[login_time] .", Session expires at: " .$session_will_expire_at;
3. Menu, onLoad: I add JavaScript, which will calls the PHP file by Ajax everytime when the user clicks on a Menu item. I am searching for the Element ‘rod_col2’, get the current content, make the Ajax call and modify the current line
Code:
?>
<script>
window.onload = function() {
$(document).on(‘click’, ‘li > a’, function() { /* calls this function whenever an “a” object inside a “li” object is clicked /
changemyfooter(this.id);
});
};
/ links each menu item to a different image, in case your “id” is empty or does not exists it does */
function changemyfooter(id_menu)
{
var span = document.getElementById(“rod_col2”);
var current_content = document.getElementById(“rod_col2”).innerHTML;
current_content = current_content.substring(0, current_content.indexOf('at:')+3);
// Call Ajax to adjust the line
$.ajax({
url:'../get_footer.php',
complete: function (response) {
span.textContent = current_content + response.responseText;
},
error: function () {
span.textContent = 'There was an error calling the function';
}
});
}
</script>
<?php
- I create a PHP-file as follows, the file I put inside the main folder of my Project: (not inside the Menu-folder, cause it will be deleted, once you generate the App)
File get_footer.php:
Code:
<?php
echo date(“h:i:s a”, time() + ini_get(‘session.gc_maxlifetime’));
?>
This solution works, but its not an elegant solution of course. Especially cause the additional file “get_footer.php” is not managed by Scriptcase
If anyone has an idea how to put that file into ScriptCase, would be fine. I did upload the file to the internal Libraries, but then I dont know where I can find it, i mean what is the URL to access it
Hope it helps you[/h]
Hi ARTHUR
I found a solution for your problem, cause I did have the following issue:
Inside the menu bottom line, I wanted to show the info, when (what time) the active Session is expired. This expired date should be refreshed every time when the user clicks anything in the menu. In my case every menu opens a new tab (but doesnt matter for this example).
Solution overview is:
After the user logged in, I do set the footer line to the desired content:
Logged in as: admin(Administrator) at 3:37 pm, Session expires at: 04:01:55 pm
When the user clicks a menu item, I do refresh only all text which is after “at:”
I do this by calling an external PHP-file, which is called by AJAX. Problem was that the Menu in SC is not supporting Ajax, so I had to find a solution for this.
What you have to do to achieve this refreshment:
- Menu, Layout, Header and Footer: ROD_LIN1_COL2, Value
[footer_bottom_line_right]
- Menu, onApplicationInit:
$session_will_expire_at = date("h:i:s a", time() + ini_get('session.gc_maxlifetime'));
[footer_bottom_line_right] = "Logged in as: " .[usr_login] ."(" .[group_name] .") at " .[login_time] .", Session expires at: " .$session_will_expire_at;
- Menu, onLoad: I add JavaScript, which will calls the PHP file by Ajax everytime when the user clicks on a Menu item. I am searching for the Element ‘rod_col2’, get the current content, make the Ajax call and modify the current line
?>
<script>
window.onload = function() {
$(document).on('click', 'li > a', function() { /* calls this function whenever an "a" object inside a "li" object is clicked */
changemyfooter(this.id);
});
};
/* links each menu item to a different image, in case your "id" is empty or does not exists it does */
function changemyfooter(id_menu)
{
var span = document.getElementById("rod_col2");
var current_content = document.getElementById("rod_col2").innerHTML;
current_content = current_content.substring(0, current_content.indexOf('at:')+3);
// Call Ajax to adjust the line
$.ajax({
url:'../get_footer.php',
complete: function (response) {
span.textContent = current_content + response.responseText;
},
error: function () {
span.textContent = 'There was an error calling the function';
}
});
}
</script>
<?php
- I create a PHP-file as follows, the file I put inside the main folder of my Project: (not inside the Menu-folder, cause it will be deleted, once you generate the App)
File get_footer.php:
<?php
echo date("h:i:s a", time() + ini_get('session.gc_maxlifetime'));
?>
This solution works, but its not an elegant solution of course. Especially cause the additional file “get_footer.php” is not managed by Scriptcase
If anyone has an idea how to put that file into ScriptCase, would be fine. I did upload the file to the internal Libraries, but then I dont know where I can find it, i mean what is the URL to access it
Hope it helps you
reto.peter - This is interesting solution - thanks for sharing. I’m working on another part of the project at the moment and I’m still considering coming back to this because I need to show some variable info which will remain on the screen all the time. I will get back to this in a few weeks and will test your solution to see how this works.