Integrate HTML Elements with JavaScript to create a Custom control

Integrate HTML Elements with JavaScript to create a Custom control

  

Hi Team,

I am trying to create a custom control, I have JavaScript, HTML, CSS for it.

I have already integrated JavaScript required for it, but i am unable to add the supporting HTML elements required for it.

I tried to use "HTML" web-block available in SilkUIFramework, but somehow its not supporting the HTML script i have added inside it.

Please find below the HTML Code:-

<!doctype html>
<html>
<head>
<!-- Title etc -->
<title>www.WhatIBroke.com - FullCalendar Updates (Chris Owens)</title>

<!-- Stylesheets etc -->
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css" />
<link rel="stylesheet" type="text/css" href="css/view_calendar.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.miniColors.css" />
</head>
<body>

<!-- Content Wrapper -->
<div id="content_wrapper">

<!-- Calendar div -->
<div id="calendar">
</div>

<!-- Event generation -->
<div id="event_generation_wrapper">
<div class='left'>
<div class='text'>Background:</div><br />
<div class='text'>Border:</div><br />
<div class='text'>Text:</div><br />
</div>
<div class='right'>
<input id="txt_background_color" type='hidden' class='color_picker' value='#2795C3' /><br />
<input id="txt_border_color" type='hidden' class='color_picker' value='#6AB3D3' /><br />
<input id="txt_text_color" type='hidden' class='color_picker' value='#ffffff' /><br />
</div>
<input id='txt_title' type='text' value='Title' /><br />
<textarea id='txt_description'>Description</textarea><br />
<input id='txt_price' type='text' value='5.00' /><br />
<input id='txt_available' type='text' value='5' /><br />
<input id="btn_gen_event" type="button" value="New Template" class='btn' />
<input id="btn_update_event" type="button" value="Update Event" class='btn'/>
<input id="txt_current_event" type="hidden" value="" />
</div>

<!-- Booking types list -->
<div id='external_events'>
<div id='external_event_template' class='external-event ui-draggable'>One Hour</div>
</div>
</div>

<!-- Include scripts at bottom to aid dom loading and prevent hangs -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.9.2.custom.min.js'></script>
<script type='text/javascript' src='js/fullcalendar.js'></script>
<script type='text/javascript' src='js/view_calendar.js'></script>
<script type='text/javascript' src='js/jquery.miniColors.js'></script>
</body>
</html>

Kindly help us on this.

Thank you in advance.

I am using OutSystems version 10

Regards,

Swaroop Mutalik



what is the problem?

what doesn't work?

what is developer-tools showing?


Hi J,

Thanks fro your kind reply

I have worked out the HTML part, its not showing any errors now

Maybe there is some mismatch with JavaScript, currently looking at that part.

I have added all supporting JavaScript needed for the control and HTML part, but its not rendering on screen.

Thanks & regards,

Swaroop

Hi Swaroop,

Firstly, can you please make sure you have only content inside the expression and trim out html/title and body tags which will be automatically added by silkui framework.

Secondly, you shouldn't  add jquery libraries(JS and CSS) as they are added by default in silkui framework.

Rest everything looks fine.


Regards,

Sree