Adding custom HTML to admin item view #94

New Issue

Closed

opened 2017-06-01 02:22:56 +00:00 by mwweb · 1 comment

mwweb commented

2017-06-01 02:22:56 +00:00

(Migrated from github.com)

Custom codes is a phenomenal addition, adding a lot more flexibility in the development of components.

One question that I have is the best way to add custom codes for HTML to a location within a view. An example is with Google Map/Geocoding. The geocoding was easily added as custom codes, and works flawlessly. However, I want to display a map showing the location that was geocoded. I can add the following a custom codes:

<div class="span12">
    <?php if($componentParams['map_provider'] == '1'): ?>				
	<div id="googleMap" style="height:<?php echo (int)$componentParams['mw_mapheight'].'px'?>; width:500px"></div>		
	<input type="hidden" id="googleMapRes" value="<?php echo $componentParams['zoom'];?>" />										
	<!--<input type="hidden" id="googleMapApikey" value="<?php echo $componentParams['gmapsapi'];?>" />-->										
	<?php endif; ?>	
        
        <?php if($componentParams['map_provider'] == '2'): ?>				
	<div id="bingMap" style="height:<?php echo (int)$componentParams['mw_mapheight'].'px'?>; width:500px;  position: absolute;"></div>		
	<input type="hidden" id="bingMapRes" value="<?php echo $componentParams['zoom'];?>" />										
	<input type="hidden" id="bingMapApikey" value="<?php echo $componentParams['bingmapsapi'];?>" />										
	<?php endif; ?>	
</div>

and this works, except that it adds /[INSERTED$$$$]//5/ and /[/INSERTED$$$$]/ in the view, which isn't the desired effect.

Any suggestions?

Custom codes is a phenomenal addition, adding a lot more flexibility in the development of components. One question that I have is the best way to add custom codes for HTML to a location within a view. An example is with Google Map/Geocoding. The geocoding was easily added as custom codes, and works flawlessly. However, I want to display a map showing the location that was geocoded. I can add the following a custom codes: ``` <div class="span12"> <?php if($componentParams['map_provider'] == '1'): ?> <div id="googleMap" style="height:<?php echo (int)$componentParams['mw_mapheight'].'px'?>; width:500px"></div> <input type="hidden" id="googleMapRes" value="<?php echo $componentParams['zoom'];?>" />  <?php endif; ?> <?php if($componentParams['map_provider'] == '2'): ?> <div id="bingMap" style="height:<?php echo (int)$componentParams['mw_mapheight'].'px'?>; width:500px; position: absolute;"></div> <input type="hidden" id="bingMapRes" value="<?php echo $componentParams['zoom'];?>" /> <input type="hidden" id="bingMapApikey" value="<?php echo $componentParams['bingmapsapi'];?>" /> <?php endif; ?> </div> ``` and this works, except that it adds /***[INSERTED$$$$]***//*5*/ and /***[/INSERTED$$$$]***/ in the view, which isn't the desired effect. Any suggestions?

Llewellyn commented

2017-06-01 07:04:35 +00:00

Yes there is a few custom code concepts, did you watch the two videos we released in relation to this?

There are two types of custom code placeholders, if you open a custom code item you will see Comment Type (used in placeholder) with these two options PHP/JS & HTML

Switching between these will change the documentation at the bottom of the text area, that looks like this:

Then to prevent the Custom Code Placeholders from being added to the code on compilation, just on the compiler page set the add custom code placeholders to NO.

You can also in the component, change the global settings of the component by setting the add custom code placeholders to NO.

Yes there is a few custom code concepts, did you watch the two videos we released in relation to this? - [Automatic import of custom code during compilation in JCB](https://youtu.be/DFMfIl-VkSk) - [JCB manual custom code implementation](https://youtu.be/KiAtJawZ3oo) There are two types of custom code placeholders, if you open a custom code item you will see **Comment Type (used in placeholder)** with these two options **PHP/JS** & **HTML** Switching between these will change the documentation at the bottom of the text area, that looks like this: ![screenshot from 2017-06-01 07-58-21](https://cloud.githubusercontent.com/assets/5607939/26668166/629a59c0-46a0-11e7-800a-c6fcf5baa145.png) ![screenshot from 2017-06-01 07-58-58](https://cloud.githubusercontent.com/assets/5607939/26668170/64e10bb6-46a0-11e7-8cf8-50c0237f3f4c.png) Then to prevent the Custom Code Placeholders from being added to the code on compilation, just on the compiler page set the **add custom code placeholders** to NO. ![screenshot from 2017-06-01 07-54-13](https://cloud.githubusercontent.com/assets/5607939/26667981/9940c82a-469f-11e7-8eff-93f6bf79aaaa.png) You can also in the component, change the global settings of the component by setting the **add custom code placeholders** to NO. ![screenshot from 2017-06-01 08-02-16](https://cloud.githubusercontent.com/assets/5607939/26668244/b498697e-46a0-11e7-85eb-73f42da68e55.png)

👍 1