Add reference for the JavaScript and CSS plugins

[selimdag]

Hey,

I created a multi select option set field using javascript refering to the blog post  from Nicholas Hayduk. 

I want to change the look of this field, using Bootsrap Multiselect . However I don't know where I should put the reference of the library. How can I include in Portals the reference of an external library or JavaScript code?

Thanks in advance.

[OliverRodrigues]

Hi

You can create a Web File that will represent the CSS or JS you want to reference.

Create the Web File and attach the file as a Note.

Now you can reference it using the partial url: 

<script type="text/javascript" src="my web file partial url"></script>

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[selimdag]

Hi @OliverRodrigues , 

Thanks for your reply. I can't attach the .js file as a Note. I am getting the error: The attachment is not a valid file type. 

[OliverRodrigues]

You can change the file types accepted at the CDS level by going in settings --> administration --> system settings: https://www.inogic.com/blog/2010/04/how-to-restrict-attachment-file-type-and-file-size-in-dynamics-c...

but there is no need really

my recommendation is renaming the extension of your file, for example from .js to .es

and then upload the file.. but keep the partial url as .js.. so this will still find your js file

[selimdag]

Hi @OliverRodrigues , 

and where should I exactly put the reference?

<script type="text/javascript" src="my web file partial url"></script>

I am using a Webform in a Website which is showing a Page Template named "Full Page" type of "Rewrite". How to reach the HTML Code of the Website, that I can add this tag?

[OliverRodrigues]

hi

there are a few ways to add your JS.. usually when having a Web Form we add the JS at the Web Form Step level

in the model-driven app form for Web Form Step you should see a custom JavaScript field

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[selimdag]

Hi Oliver, 

I already added the JavaScript as custom JavaScript in the Webform and the Script works. What I mean is: after adding the external libraries as web files I have to include them in the HTML or?. For example this tags: 

!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
 
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

 where should to find the HTML code of the Webseite that I can do this? 

[OliverRodrigues · Accepted solution]

Sorry.. you can add into the HTML of your Web Page

in this post I show how to add the mask jquery plugin, very similar to what you need: http://oliverrodrigues365.com/2020/04/15/power-apps-portals-adding-field-mask/

see if it make clear

thanks