I am reading the docs about calling clientlibs in sightly.
I am not getting the below syntax
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.all # categories='clientlib1,clientlib2'}"/>
why we are using category here? How does it related to clientlibs?
Lets break this down:
<sly> - is a sightly tag that does nothing :) So when you don't want to use an HTML tag you can use <sly> as a placeholder.
data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html - this line references the clientlib.html file that has templates marked with data-sly-template attributes. These templates are reusable piece of markup. Look at them as functions in htl.
data-sly-call - used to call one of the templates from the above clientlib.html
clientLib.all - "all" is the name of the template being called from clientlib.html which is referred using clientLib keyword (-use.clientLib)
# categories='clientlib1,clientlib2 - categories are used to identify cq:clientLibraryFolder that are used for client side code in AEM. If you check http://localhost:4502/libs/granite/ui/content/dumplibs.html it will show you the location of libraries clientlib1 & clientlib2
So in a nutshell, this line calls 2 libraries (containing js & css) with categories clientlib1 & clientlib2 and loads them on to the page/component
Related
When I export the xml file of a multiple choice question, it contains the following lines:
<idnumber>arbitrary_id_set_by_user</idnumber>
<answernumbering>ABCD</answernumbering>
<tag></tag>
Is there a way to add idnumber, answernumbering and tag to the metainformation section of the question so that r-exams can export to moodle XML as <idnumber>idnumber</idnumber>,<answernumbering>ABCD</answernumbering>, <tag>tag1</tag>, and <tag>tag2</tag> etc?
The <answernumbering> tag can be set in exams2moodle() via the answernumbering= argument, see ?exams2moodle. The reason for this is that this is set in the same way for all exercises in a quiz. This is more consistent than setting it individually and potentially inconsistently in the meta-information of the different exercises.
The <idnumber> tag appears to be used by Moodle only for internal purposes. It is also not mentioned in the official Moodle XML documentation at https://docs.moodle.org/311/en/Moodle_XML_format. Hence we did not implement it in exams2moodle().
The <tag> is currently not supported in exams2moodle() because we felt that it would be more important to have tags in the Rmd (or Rnw) exercise itself and not the Moodle version of the exercise. For structuring the content on the Moodle side the exsection meta-information can be used, see boxhist for a worked example.
Finally, you can add arbitrary metainformation by using the exextra tag. This is used, for example, in the essayreg exercise template. However, there is no general way of using this extra metainformation to insert additional XML code in the exams2moodle() output. To do that, the source code underlying exams2moodle() would have to be adapted correspondingly.
Need: A dynamic template loaded from a DB
I need to present a JSON object via "template plugins" that will come from a database (defined outside the application itself). The plugin will be applied only if a plugin exists.
For this example, let's assume I have this object of type "Reservation" that contains a sub-object of type "Flight":
{
"id": "ABC-XYZ",
"reservationDate": "2020-09-23",
"state": "paid",
"flight":
{
"origin": "BCN",
"destination": "MAD",
"airline": "VY"
}
}
Rules
The controller will call a page template passing multiple objects.
The page template will "use" or "include" (see later more info) an object.html.twig and will display it.
The object.html.twig will do this:
If there's not any known plugin able to handle this type of object, the template will display a <pre> with the object converted to YAML. This will be mainly act as a "default" plugin or "fallback" plugin.
If there's a known plugin able to handle the object, the object will be sent to the plugin (which is not anything else than another twig template).
In this case, the plugin should be able to separate "parts" of "interpretable" results to make them "nice" and leave the rest into an object that will be, in turn, displayed again with the original "default" plugin.
If there are parts of the object that are in turn interpretable, they will be in turn passed to other plugins.
Example "desired" outputs
Sample 1. No plugin available
Sample 2. Plugin 'reservation' available. Interprets the state in green. Also removes the redundant data of the ID
Sample 3. Same than 2 but also plugin 'flight' available, able to process the flight block. Formats the texts and makes a lookup of the airline full-name
Sample 4. Plugin 'flight' available, able to process the flight, that in turn knows that the origin and the destination are "airports" and passes them into the corresponding nested 'airport' plugin, because they are "reusable" objects not only in the "flight" plugin but also in many other places in the application, so they are defined appart
What I have already explored
I know that doing it via 'include' it could work. But let's take a look at the differences between 'use' and 'include':
The major difference between include and use in twig is that:
When you include a template, it's direct HTML 'inserted there' where you can use the {{ }} operator for printing and {% %} for control flow (set variables, ifs, fors, etc.). The renderer will process it straight forward. But defining a new block via {% block myNiceBlock %} is forbidden.
When you 'use' a template, it's pre-loaded, and blocks are permitted. There's no rendering of the included block. Then, from the caller, you use a {{ block( 'whatever' ) }} to tell the renderer to go and render that specific block.
The 'include' is more rudimentary. The use allows horizontal reusing and allows itself to auto-organize itself with other sub-blocks called by the parent block, all in one single file.
For example, in the airports example, if there are N images, in a include you should put the wrapper HTML directly in the file, do a loop and inside the loop write the inner HTML.
Instead in the use approach you'd do an airport block which in turn loops over the images and just calls the block airportImage which is defined in another block in the same file, thus facilitating clean-coding.
Requirement
The application should not be re-deployed when new plugins are created. They must be loaded from a DB or any other dynamic system, as the plugins will be written by "users of the application" as they need it. No deploy allowed.
The plugins should be written in terms of a "block-able" twig template, so need to be 'use'-able.
Question
Discovering "which" plugin to call is not a problem. Assume that whoever (the controller, the twig itself, whoever really) can discover for this example that a "reservation" plugin exists somewhere. How can I use it from the page? When the reservation is rendering it "asks if a flight plugin" is available. If not, all to the YAML. If it is, how can then dynamically tell the reservation to use the flight?
In short: How do I force a template to dynamically use (not include) templates that, in turn, comes from the database (not from fixed files)?
NOTE: If this info is useful: I'm using Symfony 5 with webpack.
Thanks!
When generating forms with the form module the corresponding yaml files get stored in fileadmin/user_upload.
Now I want to integrate those yaml files into my sitepackage and thus into my CVS. Where is the correct place for them? In the example extension they are stored in Resources/... while I would think they have to go into Configuration/Yaml
And how do I configure the form extension to search them in that place?
While it's basically a matter of taste where exactly one saves his form definitions, I try to separate form configuration and form definitions.
From the official documentation:
[...] the form configuration allows you to define:
which form elements, finishers, and validators are available,
how those objects are pre-configured,
how those objects will be displayed within the frontend and backend.
In contrast, the form definition describes the specific form,
including
all form elements and their corresponding validators,
the order of the form elements within the form, and
the finishers which are fired as soon as the form has been submitted.
Furthermore, it defines the concrete values of each property of the mentioned aspects.
So, for more clarity I save all form configuration in a sitepackage under Configuration/Yaml/ and the form definitions under Resources/Private/Forms, neighbouring the templates.
I wrote a full tutorial how to use custom templates with EXT:form, which also includes the answers to your question.
In short:
Register YAML configuration with TypoScript in your extension root folder as ext_typoscript_setup.txt (as recommended1)
plugin.tx_form.settings.yamlConfigurations {
100 = EXT:my_extension/Configuration/Yaml/CustomFormSetup.yaml
}
module.tx_form.settings.yamlConfigurations {
100 = EXT:my_extension/Configuration/Yaml/CustomFormSetup.yaml
}
CustomFormSetup.yaml – setting up a new storage path
TYPO3:
CMS:
Form:
persistenceManager:
allowedExtensionPaths:
10: EXT:my_extension/Resources/Private/Forms/
allowSaveToExtensionPaths: true
allowDeleteFromExtensionPaths: true
1TypoScript inside an ext_typoscript_setup.txt is automatically loaded in both frontend and backend of your TYPO3 installation directly after installing your extension. This differs from other TypoScript files, which have to be included manually, e.g. as static templates. See official Form Framework documentation.
I'd suggest Resources/Private/Forms for your form definitions. The form extension clarifies how to register additional form definition paths.
Let's say, I have a template A and sling:resourceType is /apps/myproject/components/basePage. In this component I've body.html and header.html and footer.html script included through slightly in body.html.
Now I am creating another template B, and sling:resourceType is /apps/myproject/components/compB and sling:resourceSuperType of compB is /apps/myproject/components/basePage.
In /apps/myproject/components/compB I have added content.html and selector.html
If I create a page (mytest.html) of type template B, then header and footer script is included correctly but when I hit this mytest.selector.html then header and footer script is not included. I want template B will have two different view based on selector.
Please let me know where I am missing.
I believe you are trying to include multiple scripts within same template to achieve different views. This is correct approach todo in AEM. But missing part is the moment you create the second script (selector.html in this case), it becomes another template and you need to code to include your entire page scripts into this script as well.
When you override scripts from /libs/wcm/foundation/components/page component, they ll work fine when your custom script names matches to parent component. For example your body.html will override /libs/wcm/foundation/components/page/body.html and page will render how it is coded. When you create selector.html it becomes independent script as there is no /libs/wcm/foundation/components/page/selector.html.
You need to define all behavior (to include header, footer script etc) explicitly against your custom script. In this case you need include header/footer scripts explicitly into your selector.html
Using a selector means that you're using some special implementation of your component. For instance, your component may have several charts and you want to encapsulate those in your selectors and use it through AJAX from browser, and reuse those selectors in your main component as well.
Currently, you're trying to achieve is to use your header and footer to another component which breaks the encapsulation rule. Rather do this, take out your header.html and footer.html and make those individual components and you it in your basePage as well as your child pages.
See the snippet below:
<div data-sly-resource="${'header' # resourceType='/apps/myproject/components/header'}">
<p>Your body and anything you want to put here</p>
<div data-sly-resource="${'footer' # resourceType='/apps/myproject/components/footer'}">
This way, you can reuse your headers whereever you want even in your selectors.
I feel like I'm missing something obvious. In working with v0.6.0, the Readme indicates you can use:
{%= partial("partial-name") %}
However, these are just getting printed as plain text. Do I need to use a different engine if I want to have those tags parsed?
Assemble allows using different engines and the example that you have is using lodash with custom delimiters.
To use the default partials helper in handlebars do {{partial "partial-name"}}