Extbase TYPO3 adding Custom JS Library to Backend Module - typo3

I want to use custom JS libraries in my extbase extension. Is it possible to use add_additional footer data api in a backend module controller?

Use a viewhelper in your backend Fluid template:
<f:be.container
addJsFile = "{f:uri.resource(path:'js/script.js')}">
<!-- Content -->
</f:be.container>
UPDATE:
As mentioned by #biesior (thanks!) the method addJsFile is deprecated. Here is an example using the new and recommended be.container viewhelper method includeJsFiles instead. This new function can include multiple JS files instead of just one:
<f:be.container
includeJsFiles = "{0:'{f:uri.resource(path: \'js/script1.js\')}', 1:'{f:uri.resource(path: \'js/script2.js\')}'}" >
<!-- Content -->
</f:be.container>
See the corresponding Fluid viewhelper documentation.

Related

Using Svelte JS framework with a Web Component library, how can I accomplish two-binding with the custom elements via the bind:value directive?

Note: There is a GitHub issue open on the Svelte repo for this very question.
https://github.com/sveltejs/svelte/issues/4838
While I understand that this may or may not someday become a feature of Svelte, what I am asking is how I can create a workaround today to support a third-party web component library like Shoelace or UI5, or Ionic with two-way binding?
Synopsis:
I have set up a Svelte app and successfully added a Web Component Library (Ex: Shoelace).
I write a line of code that uses two-way binding like:
<sl-input name="name" type="text" label="Name" bind:value={name}/>
I cannot two-way bind (bind:value={}) because the Svelte compiler doesn't recognize the valid bindings for the custom web components.
If there were a wrapper library that you know of, or some other thing I could do to make it work, that would be great.
I am not sure if this will work with libraries but it is worth a shot. For my custom component I just followed this answer.
Add this in your custom component:
<script>
export let onValueChange;
export let value;
$: onValueChange(value);
</script>
And add this when using the component (it will give an error until you add this)
<custom-component onValueChange="{(x) => value = x}"/>

maincontroller.js mainmodel.js not loading in liferay from extjs 6?

Here I am not able to add both of these files before this it was not adding main.js, so I added that in index.html
<script src="<%=request.getContextPath()%>/examplecalculator/app/view/main/Main.js"/>
And now it is not loading other two files.
Required JavaScript or CSS Resource can be loaded with you portlet declarative inside liferay-portlet.xml
It should look like:
<portlet>
<portlet-name>YourPortletNeedingAJSresource</portlet-name>
<icon>/icon.png</icon>
<header-portlet-css>/css/main.css</header-portlet-css>
<footer-portlet-javascript>/app/view/main/Main.js</footer-portlet-javascript>
</portlet>
The path /app/view/main/Main.js was guessed according to your snipped. It should be adjusted according to your project structure.

includeJsFiles not working in fluid ViewHelper in TYPO3

I need to add a custom js file in my backend module of TYPO3 v7.6 extension.I added the following code in my layout
<f:be.container includeJsFiles="{0:'{f:uri.resource(path:\'Js/Main.js\')}'}">
<!------------ Contents ------------>
</f:be.container>
No error but the js file is not included in page source.Any other method is there to implement my requirement?
I would assume the path to the JS-file is wrong.
With your declaration it is expected to be EXT:your_extension/Resources/Public/Js/Main.js in your extension (as statet in the core sources).
But when in doubt I would try some other pathes. (full references)

FLUID Link with target and class

I wrote a small Frontend Plugin "Text+Image+Link".
If my editor choose a file link or an external Link, he also assign to open the target in a new window: _blank
In my Fluid-Tempalte I wrote
<f:link.page pageUid="{txtTarget}" class="btn btn-default">{txtLink}</f:link.page>
But there's no support to the link target, here's the output:
<a class="btn btn-default" href="http://kbs2015.com">Read more</a>
There's no target-attribute, but I chose it at Link Wizard (flexform): target:_blank !?
-
I try it like this:
<f:format.html><link {txtTarget}>{txtLink}</link></f:format.html>
There's the right link and target but no CLASS! Output:
Read more
-
How can I use target (from wizard) and two classes for a Link in FLUID?
DO I need a new ViewHelper? I don't know? Can I solve my problem with Fluid?
Thanks for your help.
( TYPO3 6.2.8 )
It depends on which TYPO3 version you use. TYPO3 7.0 has a new ViewHelper (TypolinkViewHelper) which handles Typolinks created with the link wizzard and respects link targets. In TYPO3 4.5 and TYPO3 6.2 there is no such viewhelper, so you should try to backport the viewhelper from TYPO3 7.0 to your extension.
Copy the content from the linked viewhelper to the Viewhelpers directory of your extension and adjust the namespace to match the one from your extension. Then you can use the viewhelper in your extension.
It won't work if I copied the TypolinkViewHelper from TYPO3 CMS 7.0
I've got always the error
Error Warning: Could not analyse class:Tx_MyExtension_ViewHelpers_Link_TypolinkViewHelper maybe not loaded or no autoloader?
I try it successfully with a Test-ViewHelper, but they not with the TypolinkViewHelper.php
Anyway ... I solve it with this FLUID-Snippet:
<f:format.html><link {txtTarget}><span class="btn btn-default">{txtLink}</span></link></f:format.html>

How can I expose plugin functions to docpad partials?

tldr; Is there a way to expose functions defined in one plugin for another plugin to use?
I'm trying to use the tagging plugin (https://github.com/rantecki/docpad-plugin-tagging) within a partial.
I have a Jade partial setup as follows:
.post-tags
| Posted in
each tag in tags
a(href=getTagUrl(tag))= tag + ' '
where getTagUrl is a function defined by the tagging plugin. The problem is that the partial has no knowledge and this partial does not render.
As v2.8.0+ of the partials plugin now includes the template data by default (you don't have to manually specify it's inclusion anymore), try running docpad update in your project's root directory and trying again. Otherwise, we'll probably have to see the source code of your project to help isolate the issue.
It's because partial do not have access by default to templateData, the object holding the getTagUrl helper. You have to pass it explicitly to the partial.
Here's a similar answer provided for the eco templating language :
https://stackoverflow.com/a/16631649/232943