Category Archives for "Web Development"

Create dynamic SAP Web dynpro screen

Simply create a new Web dynpo application and add this code to the WDDOMODIFYVIEW method of your main view.

method WDDOMODIFYVIEW .
  data : lr_textview type ref to cl_wd_text_view.
  Data: lr_uicontainer type ref to cl_wd_uielement_container,
        lr_rowhead type ref to cl_wd_row_head_data,
        lr_button type ref to cl_wd_button,
        lr_inputfield type ref to cl_wd_input_field,
        lr_flowdata type ref to cl_wd_flow_data,
        ld_childid type string.

*if first_time = 'X'. "Uncomment when parameter created in method
  lr_button = cl_wd_button=>new_button( view = view
  text = 'My Button'
  on_action = 'PRESSBUTTON' ).

  lr_rowhead = cl_wd_row_head_data=>new_row_head_data( element = lr_button ).
  lr_button->set_layout_data( lr_rowhead ).
  lr_button->set_tooltip( value = 'Tooltip' ).
  lr_flowdata = cl_wd_flow_data=>new_flow_data( element = lr_button ).
  lr_uicontainer ?= view->get_element( 'ROOTUIELEMENTCONTAINER' ).
  lr_uicontainer->add_child( lr_button ).
  lr_textview = cl_wd_text_view=>new_text_view( view = view
  text = 'Create Dynamic UI Elements' ).
  lr_rowhead = cl_wd_row_head_data=>new_row_head_data( element = lr_textview ). 
  lr_textview->set_layout_data( lr_rowhead ).
  lr_flowdata = cl_wd_flow_data=>new_flow_data( element = lr_textview ).
  lr_uicontainer ?= view->get_element( 'ROOTUIELEMENTCONTAINER' ).
  lr_uicontainer->add_child( lr_textview ).
*endif.
endmethod.

Cookiechoices cookie only set for specific page not whole website

When i first downloaded the the cookiechoices.js file from the link suggested by google and then installed it onto my site it didn’t really work correctly. It would display the message but when the user clicked on the ok button it only seemed to set the cookie for that specific page, so when a second page was visited the cookie message would be displayed a second time.

Cause of the Error

The reason for this was that the cookiechoices code was not setting the path correctly. You can see the Path that the cookie sets by going to “More tools->Developer tools” within Chrome and then selecting the Application tab and expanding Cookies within the Storage tree structure. As you can see in this example the path /abap has been included as part of the cookie properties. This is not what you want, it should just be a ‘/’ like all the others. In this case the cookie will only be set for all pages within the /abap directory rather than the whole website.

CookieChoices Path Error

CookieChoices Path Error

Solution

The solution is actually quite simple but took me a lot of messing around to find. You basically just need to hard code the path property to be the route  of your website. To do that within the cookie choices code recommended by google simply find the following section of code

document.cookie = cookieName + ‘=y; expires=’ + expiryDate.toGMTString();
Now simply add “path=/” after =y;

i.e.  Resultant JavaScript code will now look like this:
document.cookie = cookieName + ‘=y; path=/; expires=’ + expiryDate.toGMTString();

 

Test

Once you have implemented the above fix and uploaded the new file to you website try a page where the cookie choices message is displayed  and click the OK button again. The result should be that the cookie is set for the route of the website.

cookiechoices fix

cookiechoices fix

Unix commends via putty

Create directory 

mkdir page-backup

create directory called page-backup

 

Copy all files and sub-directories from one directory to another

cp -r page/* page-backup

copies all files from page into page-backup

 

html image url contains http://1.1.1.3/bmi/ or something with bmi

I noticed the other week that some of the image SRC links within my website HTML code was being transformed. Basically a spurious http://1.1.1.2/bmi/ (or a version of this such as 1.1.1.2/bmi/, 1.1.1.4/bmi/ etc) was being injected into my HTML code when my website was being viewed. At first I thought it was my web host implementing some kind of image caching so i ignored it for a while. I then started notice that the images were not always been displayed so I contact them to discus the issue and to find out what was going on.

To cut a long story short it turned out to be my internet service provider(ISP) Three.co.uk. Because it is a 4G mobile based provider they and most of the others seem to use a service call ByteMobile, which tries to reduce the amount of data being transferred. I’m not sure they use this all the time but just in busy areas or at peak times.

 

The fix

After a bit of trial an error the final solution was quite a simple one, just enter the following code into your .htaccess file.

<IfModule mod_headers.c>
Header set Cache-Control “no-transform”
</IfModule>

this then tells the service provider that pages from this website should not be transformed and to display them as they are.

 

Fix with HTTPS
I believe an alternate fix would be to implement HTTPS on your web site, this way your code is secure and the service provided is unable view or transform it even if they wanted too

SAP HTML popup window just using CSS

The following code demonstrates how to create a popup window to display EKPO records within a SAP HTML based application. It achieves this without the need for any JavaScript and simply uses HTML, CSS styling and ABAP code to retrieve the data records. If you wanted tes this is a simple HTML document outside of SAP simply remove the section of code  within <!–ABAP Code - Start –> and <!–ABAP Code - End –>

 

Full SAP HTML code Listing

<!DOCTYPE html>
<head>
<title>Example popup window using only CSS</title>
<style>
.background_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.popup_window {
display: none;
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
padding: 10px;
border: 10px solid #80CCFF;
background-color: #FFFFFF;
z-index:1002;
overflow: auto;
font-size: 14px;
}
</style>

<script type=“text/javascript”>

function display_popup() {
document.getElementById(‘window’).style.display=‘block’;
document.getElementById(‘background’).style.display=‘block’;
}

function close_popup() {
document.getElementById(‘window’).style.display=‘none’;
document.getElementById(‘background’).style.display=‘none’;
}
</script>

</head>
<body>
<p>
Click here to display ekko records
<a href=“#” onclick=“display_popup();”>Display records</a>

</p>

<div id=“window” class=“popup_window”>EKPO Records:
<br><br>
<!–ABAP Code - Start –>
<%  datait_ekpo type standard table of ekpo,
wa_ekpo type ekpo.

select *
from ekpo
up to 10 rows
into table it_ekpo.

Loop at it_ekpo into wa_ekpo.
%>
<%=wa_ekpo-ebeln%>-<%=wa_ekpo-TXZ01%><br>
<%
endloop.
%>
<!–ABAP Code - End–>

<a href=“#” onclick=“close_popup();”>Close</a></div>
<div id=“background” class=“background_overlay”></div>
</body>
</html>

 

Initial Screen
css_popup1

Popup screen
css_popup3

 

Add remove SAP HTML buttons or links using javascript

Adding and removing HTML elements such as buttons and A href links dynamically is very simple using javascript. If you are bored of reading already feel free to go straight to the end of this article where there is a

Below is the individual JavScript code for implementing the various methods of doing this either by showing/hiding and element on screen or by removing it altogether and then re-adding it. Both have there pros and cons so just need to decide which fits in with your requirements.

 

Full code listing
Alternatively here a basic code snippet which you can just copy and paste into your your SAP BSP or a HTML file and test this out for yourself.

adddel1

<html>

<head>
<title>Demonstrate how to add and delete buttons and links</title>

<script type=”text/javascript”>
function delbutton()
{

var elem = document.getElementById(‘report1′);
elem.parentNode.removeChild(elem);

}

function addbutton()
{

var addbut = document.createElement(‘input’);
addbut.type  = “submit”;
addbut.value = “Test Button”;
addbut.name = “test1″;
addbut.id = “report1″;
addbut.setAttribute(‘class’, ‘test’);
document.getElementById(‘button1′).appendChild(addbut);
}

function dellink()
{

var elem = document.getElementById(‘report2′);
elem.parentNode.removeChild(elem);

}

function addlink()
{
var addLink = document.createElement(‘a’);
var linkText = document.createTextNode(“Test link”);
addLink.appendChild(linkText);
addLink.title = “title”;
addLink.href = “#”;
addLink.id = “report2″;
addLink.setAttribute(‘class’, ‘test’);
document.getElementById(‘link1′).appendChild(addLink);

}

function hideelement() {

document.getElementById(‘report1′).style.visibility = ‘hidden’;

}
function showelement() {

document.getElementById(‘report1′).style.visibility = ‘visible’;

}
</script>

</head>

<body>
<form id=”sapbspform” name=”sapbspform” method=”post” action=””>
<p>
<ul>

<li id=”button1″>
some text
<input id=”report1″ type=”submit” name=”testbut1″ value=”Test Button” >
some more text
</li>

<li id=”link1″>
<a  href=”#” id=”report2″ value=”1″  >Test link</a>
</li>
</ul>
<br><br>
<a  href=”#” onclick=”delbutton();” value=”Del” id=”delbutton” >del button</a>
<br><a  href=”#” onclick=”addbutton();” value=”Add” id=”addbutton” >Add button</a>

<br><br><a  href=”#” onclick=”dellink();” value=”Del” id=”dellink” >del link</a>
<br><a  href=”#” onclick=”addlink();” value=”Add” id=”addlink” >Add link</a>

<br><br><a  href=”#” onclick=”hideelement();” value=”Del”>Hide button</a>
<br><a  href=”#” onclick=”showelement();” value=”Add”>Show button</a>
</p>
</form>
</body>
</html>

 

Executing the HTML code
When you execute the report you will notice the following behaviour:

  • Clicking the Del button
    Notice that when the button is deleted the text either side closes together and uses the space where the button used to be. Also note this means that once it has been removed you can no longer reference the element within your JavaScript.

del

  • Clicking the Hide button
    When the button is hidden its still takes up the same space but

hide

 

 

The Complete Web Developer Course – Now only $99 instead of $199 via this link

web_development

tak_courseWhatever you’re motivation to become a pro web developer, you’ve come to the right place.

The Complete Web Developer Course is THE most comprehensive, cost-effective and career-enhancing course you’ll find on the web – or your money back.

It’s a one-stop-shop for everything you need to start creating professional websites that engage visitors, call them to action and ultimately – make you money!

This fast, effective course takes you easily from zero skills to fee-earning web developer in just six weeks.

Not only that but you’ll get unlimited web hosting for one year. So you can start earning cash before you’ve even finished.

What’s involved?

You’ll gain immediate access to 11 painstakingly-designed chapters, each developed with ease of learning in mind. Using my background as a Cambridge University mathematics graduate and professional code teacher I’ve created crystal-clear, original content which you’ll find easy to understand – and more importantly – to absorb.

You’ll find learning both quick and fun. And, I’ve used techniques proven to effortlessly lock that knowledge in, as you gallop through each comprehensive chapter.

If you’re looking for a genuinely effective course that equips you to build stunningly presented, websites that will start earning you cash, I personally guarantee this is the number one course for you.

Don’t believe me? I offer full money back guarantee if you haven’t earned your money back within 60 days of completing the course.

Are you ready to transform your world and become a confident, cash-earning web developer?

Here’s what you get with The Complete Web Developer Course:

You’ll get access to twelve chapters that will give you a deep understanding of each topic.

Each chapter is supported with over 28 hours of clear, engaging video tutorials and practical website challenges.

All at your fingers tips. Instantly.

·The course starts with the basics. I’ll show you the tips and tricks to work effortlessly with web technologies like HTML, CSS and JavaScript.

·Once you’re doing that in your sleep, I’ll show you how to build your own responsive websites using more advanced techniques such as iQuery PHP, MySQL and Twitter Bootstrap.

·By then you’ll be developing blogs and eCommerce sites with WordPress, and learn intelligent ways to add dynamic content, using APls to connect to sites such as Google Maps and Facebook.

·As Richard Branson says, ‘The best way of learning is by doing,’ so you’ll complete website challenges at every section. As you painlessly tick them off, you’ll use your skills to put a site together as you go. The final challenge is a full Twitter clone.

Over 11 chapters you will learn:

·Setting up your (free) hosting

·HTML

·CSS

·Javascript

·jQuery

·CMSs and WordPress

·Responsive Design

·PHP Coding

·MySQL Databases

·APIs

·Mobile Apps

·Bonus Chapter: How to make $10,000 while learning to code

 

What else will you get?

·A friendly, informal community to support you every step of the way

·Personal contact with me, the course tutor

·Ebooks that will show you how to start earning before you’ve even finished

·Lifetime access to course materials

·Hands-on learning to lock that knowledge in

·A deep understanding of how to code, design and build powerful websites

·UNLIMITED WEB HOSTING FOR ONE YEAR (worth $199)

You’ll never have to waste your time and hard-earned cash learning from books, expensive online courses and YouTube videos. With The Complete Web Developer Course you get everything you need, all under one convenient, easy to navigate platform. Plus, you will get fast, friendly, responsive support by email, Twitter and on the Udemy forums.

I will never leave you hanging!

Check out my bio to see how I was able to give up my successful career to teach others to code part time. Since making that decision, I’ve never looked back.

It doesn’t matter how old you are or what you do professionally. I guarantee that ANYONE can benefit from this course, whether it’s earning a bit of extra cash on the side or changing career altogether.

So what are you waiting for? Transform your world and sign up now to get a free copy of my exclusive 76-page ebook ‘How to make $10,000 while learning to code’.

Limited Time! 50% off The Complete Web Developer Course – Build 14 Websites!

 


TAUGHT BY

Hi! I’m Rob. I have a degree in Mathematics from Cambridge University and you might call me a bit of coding geek. After building websites for friends and family for fun, I soon learned that web development was a very lucrative career choice. I gave up my successful (and sometimes stressful) job as a teacher to work part time and today, couldn’t be happier. I’m passionate about teaching kids to code, so every summer I run Code School in the beautiful city of Cambridge. I also run the popular web hosting and design service, Eco Web Hosting which leaves me free to share my secrets with people like you. You wouldn’t believe the freedom that being a web developer offers. Sign up and find out for yourself why so many people are taking and recommending this course. I genuinely believe it’s the best on the market and if you don’t agree, I’ll happily refund your money. Sign up to The Complete Web Developer Course and join me in this amazing adventure

Remove and Add HTML element using Javascript

When creating your SAP BSP using HTML you may want to add and remove elements dynamically using JavaScript and sometimes simply setting the element to visible or not isn’t the solution you are after. Sometimes I have found that even though an element has been set to hidden its footprint is still left behind and interferes with the alignment of other fields. Yes you could maybe change the structure/style of your HTML code so this does not happen but it is possible to use JavaScript to add and remove elements as and when your require.

 

Original HTML code
<li id=”backButton”>
<a id=”mybackLink” href=”?OnInputProcessing(goback)” class=”myButton”  >Back to previous</a>
</li>


Remove HTML elements
Removing an element is easy simply use the following JavaScript code:

var delbutton = document.getElementById(‘myBackLink’);
delbutton.parentNode.removeChild(delbutton);

 

Add HTML elements
This is a little more tricky as you need to manually re-build the element again. I say tricky, it just needs a few more lines of code which you can copy and paste from below. Please note that there are other, maybe better ways to do this. This is just the method used after much Google searching. It will at least give you a start especially if your background is SAP and you are just getting into the world of JavaScript/HTML etc.

 

Re-adding Link (a href) back to your HTML page using  javascript
var addLink = document.createElement(‘a’);
var linkText = document.createTextNode(“Back to Index”);
addLink.appendChild(linkText);
addLink.title = “title”;
addLink.href = “index.htm”;
addLink.id = “mybackLink”;
addLink.setAttribute(‘class’, ‘myButton’);
document.getElementById(‘backButton’).appendChild(addLink);

 

Also here is the code required to add an input button instead of a link(a href)
var addbut = document.createElement(‘input’);
addbut.type  = “submit”;
addbut.value = “Back to previous”;
addbut.name = “backbut″;
addbut.id = “mybackButton″;
addbut.setAttribute(‘class’, ‘test’);
document.getElementById(‘backbutton′).appendChild(addbut);

 

Hide and display HTML element using Javascript

Within the JavaScript of your SAP BSP application or standard web page it is very simple to toggle a HTML element between hidden and display mode using the visibility attribute. You would just reference the elements ID and set the visibility attribute to ‘hidden’ or ‘visible’, see example below.


HTML Code:

<a id=”myBackButton” href=”?OnInputProcessing(goback)” class=”myButton”  >Back to Index</a>


JavaScript Code:

document.getElementById(‘myBackButton’).style.visibility = ‘hidden’;
or
document.getElementById(‘myBackButton’).style.visibility = ‘visible’;

Javascript to split a field value at a certain character

When implementing JavaScript within your SAP BSP you may want to capture an on screen field value, ID or name  and then split this value at a certain character. I.e. if you have the value 00001-345-bob stored in an HTML field with the ID “datafield” you can use the following code to capture this value and split it at the ‘-’ character.

var fieldvalue = document.getElementById(‘datafield).value;

var fields = fieldvalue.split(/-/);

var value1 = fields[0];

var value2 = fields[1];

var value3 = fields[2];