| Table of Contents |
|---|
...
HTML Snippets and Canvas Directives
...
As an alternative, you can create a HTML file under "apq-c3-custom/html" folder directly on the Apliqo UX installation server. The file name and relative path will be then referenced in the HTML widget, similar to the snippet, as described in the instructions below.
...
Using HTML Snippets
We can start by creating the first HTML snippet example. First create a new Wizard. As part of the wizard step, create a sub-step with the type Dashboard. Call this Dashboard "Budget Selection".
...
Now you will see a message saying:
Error: HTML widget config is missing in the advanced options
We can configure the widget. To do this, click on the "</>" button next to the widget type selection as shown below. This will automatically open the snippet editor:
Create a new HTML snippet or use an already existing one.
Inside the snippet window type the following code and click Save.
...
| Code Block |
|---|
<div>
<h1>My first HTML widget!</h1>
</div> |
...
Attach the snippet to the HTML widget by clicking on the pin button next to the snippet name.
Close the snippet editor and save the Dashboard settings.
...
Canvas HTML tags
As part of the HTML snippets we can interact with TM1 using the Canvas tags. There are multiple types of supported Canvas tags and you can find all of them in the Help articles. For the following lesson we will focus on the SUBNM.
Open the newly created HTML snippet and copy the code provided below.
| Code Block |
|---|
<div style="padding-left: 3%; padding-top: 3%; font-size: 15px;"> |
...
<div style="margin: auto;"> |
...
<div>
Select the following options before you proceed.
</div>
<br>
<div>
...
<div> Select the following options before you proceed. </div> <br> <div> <input type="radio" id="w1" name="setup" value="new" ng-model="$ctrl.formData.selection" ng-checked="false"> |
...
<label for"w1">Setup new budget</label> |
...
<br>
...
<br> <input type="radio" id="w2" name="setup" value="exit" ng-model="$ctrl.formData.selection"> |
...
<label for "w2">Exit Wizard</label> |
...
</div> |
...
<br>
...
<br> <div class="apq-c3-filterbar-filters setup_wrapper" ng-if="$ctrl.formData.selection === 'new'"> |
...
<div class="one_one apq-c3-filter-label float-left"> |
...
Part of the code responsible for the SUBNM selection:
...
To make the content look better in the page:
Create a style.css file in the css folder: ApliqoServer\webapps\webAppName\apqc3-custom\css using the code provided below
Refresh the browser by clearing the cache.
...
Version:
</div>
<div>
<tm1-ui-subnm-apq
tm1-instance="UX_Demo"
tm1-dimension="Version"
tm1-subset="Default"
tm1-attribute="Description"
tm1-default-element="Actual"
tm1-ui-class="apq-c3-uidropdown"
tm1-button="true"
ng-model="$ctrl.formData.version">
</tm1-ui-subnm-apq>
</div>
<div class="two_one apq-c3-filter-label float-left">
Comment:
</div>
<div class="two_two">
<textarea rows="3" cols="40" ng-model="$ctrl.formData.comment" ></textarea>
</div>
<div>
<input type="checkbox" name="agree" value="header" id="c1" ng-model="$ctrl.formData.agree" ng-checked="false">
<label for "c1">Agree to the <a href="https://apliqo.com/termsandconditions/">Terms and Conditions </a></label>
</div>
</div>
</div>
</div> |
...
Part of the code responsible for the SUBNM selection:
| Code Block |
|---|
Version:
</div>
<div>
<tm1-ui-subnm-apq
tm1-instance="UX_Samples"
tm1-dimension="Version"
tm1-subset="Default"
tm1-attribute="Description"
tm1-default-element="Actual"
tm1-ui-class="apq-c3-uidropdown"
tm1-button="true"
ng-model="$ctrl.formData.version">
</tm1-ui-subnm-apq> |
To make the content look better in the page:
Create a style.css file in the css folder: ApliqoServer\webapps\webAppName\apqc3-custom\css using the code provided below
Refresh the browser by clearing the cache.
| Code Block |
|---|
.setup_wrapper {
display: grid;
grid-template-columns: 150px auto;
grid-gap: 5px;
grid-auto-rows: minmax(15px, auto);
}
.one_one {
grid-column: 1;
grid-row: 1;
}
.one_two {
grid-column: 2;
grid-row: 1;
}
.two_one {
grid-column: 1;
grid-row: 2;
}
.two_two {
grid-column: 2;
grid-row: 2;
}
.two_both {
grid-column: 1 / 2;
grid-row: 2;
}
.three_one {
grid-column: 1;
grid-row: 3;
}
.three_two {
grid-column: 2;
grid-row: 3;
}
.four_one {
grid-column: 1;
grid-row: 4;
}
.four_two {
grid-column: 2;
grid-row: 4;
}
.five_one {
grid-column: 1;
grid-row: 5;
}
.five_two {
grid-column: 2;
grid-row: 5;
}
.six_one {
grid-column: 1;
grid-row: 6;
}
.six_two {
grid-column: 2;
grid-row: 6;
} |
The result should look like this:
...
The subnm selection can be easily changed by configuring those parameters differently:
...
parameters differently:
| Code Block |
|---|
tm1-dimension="Version"
tm1-subset="Default"
tm1-attribute="Description"
tm1-default-element="Actual" |
For example:
| Code Block |
|---|
tm1-dimension="Region"
tm1-subset="All Countries"
tm1-attribute="Code and Description"
tm1-default-element="USA" |
Before going to the next section change the code back to the original one.
...
to navigate outside of the app use this tag
| Learn more about button customization by using to the link provided in this exercise - Bootstrap Buttons |
Wizard functions
Advanced wizard functions and workflow integration
...
Working with Task Scheduler
| Before going through this section make sure that the Task Scheduler is correctly configured. Information about the setup process for new tasks is available in a dedicated Task Scheduler Configuration article. |
The Task Scheduler is an administrative feature available for members of the APQ Admin group. It allows to plan automated tasks, e.g. sending a Report(s) to e-mail address(es), downloading report printouts directly to disk, or scheduling a specific TM1 Process to run with given parameters.
...
Click on the '+' icon visible in the Attachments section
Report can consist of one or more attachments: Views, Dashboards or Wizards. There are several customizable options available: Name Page Size Page Orientation Output Format |
...
Select Dashboard Type
Choose Exec Dashboard
Click Save
Click Execute
...
Check the WEB-INF/print folder (after the 5min or any other time amount that you set) and make sure that the pdf file was generated.
...
| Schedule can be also used to send email(s) to selected recipient(s) on the reoccurring basis. |