# JS and CSS Assets

## Working with Assets in the Admin

To make Asset management easier in the Admin, we have provided a few arrays, that you can append your assets to. We have JS and CSS arrays, as well as convention based, and full path arrays.

### Javascript Assets

We have two options for working with Javascript in the admin.

**jsAppendList**

This expects the name of the js file ( without the .js extension ) which is located in the ContentBox includes/js folder. This is a simple convention based approach, so you can easily just append a file, for example `arrayAppend( jsAppendList, 'dragula' )` to load `/includes/js/dragula.js`

**jsFullAppendList**

This expects the full path of the js file ( including the .js extension ), including the location. This is useful, because you may be using grunt or gulp to compile files, store them in different locations, or actually link out to a CDN for some of your scripts.

For example:

* `arrayAppend( jsFullAppendList, '/includes/js/dragula.js' );`
* `arrayAppend( jsFullAppendList, 'https://code.jquery.com/jquery-3.1.1.min.js' );`

#### How the JS is output

Inside of `/modules/contentbox-admin/layouts/inc/HTMLBodyEnd.cfm` you will see the following code.

```
<cfloop list="#event.getValue( "jsAppendList", "", true )#" index="js">
    <script src="#prc.cbroot#/includes/js/#js#.js"></script>
</cfloop>
<cfloop list="#event.getValue( "jsFullAppendList", "", true )#" index="js">
    <script src="#js#"></script>
</cfloop>
```

### CSS Assets

We have two options for working with CSS in the admin.

**cssAppendList**

This expects the name of the CSS file ( without the .css extension ) which is located in the ContentBox includes/css folder. This is a simple convention based approach, so you can easily just append a file, for example `arrayAppend( cssAppendList, 'dragula' )` to load `/includes/css/dragula.css`

**cssFullAppendList**

This expects the full path of the css file ( including the .css extension ), including the location. This is useful, because you may be using grunt or gulp to compile files, store them in different locations, or actually link out to a CDN for some of your scripts.

For example:

* `arrayAppend( cssFullAppendList, '/includes/css/dragula.css' );`
* `arrayAppend( cssFullAppendList, 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );`

#### How the CSS is output

Inside of `/modules/contentbox-admin/layouts/inc/HTMLHead.cfm` you will see the following code.

```
<cfloop list="#event.getValue( "cssAppendList", "", true )#" index="css">
    <cfset addAsset( "#prc.cbroot#/includes/css/#css#.css" )>
</cfloop>
<cfloop list="#event.getValue( "cssFullAppendList", "", true )#" index="css">
    <cfset addAsset( "#css#" )>
</cfloop>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://contentbox.ortusbooks.com/v4.x/developing/developing-for-contentbox/back-end-development/js-and-css-assets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.