I'm trying to create a custom form on the frontend homepage using UI Component, but buttons not showing up. I've created a custom module for this. Can someone advice ? is this right way to use ui components on frontend?
cms_index_index.xml
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<uiComponent name="frontpage_form"/>
</referenceContainer>
</body>
</page>
view/frontend/ui_component/frontpage_form.xml
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">frontpage_form.frontpage_form_data_source</item>
<item name="deps" xsi:type="string">frontpage_form.frontpage_form_data_source</item>
</item>
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/form</item>
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">frontpage_form</item>
</item>
<item name="buttons" xsi:type="array">
<item name="reset" xsi:type="string">Rocknrollsun\Proform\Block\Buttons\ClearButton</item>
<item name="save" xsi:type="string">Rocknrollsun\Proform\Block\Buttons\SubmitButton</item>
</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<dataSource name="frontpage_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Rocknrollsun\Proform\Ui\DataProvider</argument>
<argument name="name" xsi:type="string">frontpage_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_id</argument>
<argument name="requestFieldName" xsi:type="string">entity_id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="proform/index/submit"/>
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="frontpage_form">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Amazing UI Component Form</item>
</item>
</argument>
<settings>
<additionalClasses>
<class name="frontpage_form">true</class>
</additionalClasses>
</settings>
<field name="name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">frontpage_form</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="email">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Email</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">frontpage_form</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="phone">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Phone</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">frontpage_form</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="address">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Address</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">frontpage_form</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="myCheckbox" formElement="checkbox">
<settings>
<label translate="true">Confirm you're kind human</label>
</settings>
<formElements>
<checkbox>
<settings>
<prefer>checkbox</prefer>
<valueMap>
<map name="false" xsi:type="boolean">false</map>
<map name="true" xsi:type="boolean">true</map>
</valueMap>
</settings>
</checkbox>
</formElements>
</field>
<field name="country_id" formElement="select" sortOrder="10">
<settings>
<dataType>text</dataType>
<label translate="true">Country</label>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
</settings>
<formElements>
<select>
<settings>
<options class="Rocknrollsun\Proform\Model\Config\Source\CountryList"/>
</settings>
</select>
</formElements>
</field>
</fieldset>
</form>
Also created blocks for buttons
<?php
/**
* #author Anatolii Palash <anatoly.palash#gmail.com>
*/
declare(strict_types=1);
namespace Rocknrollsun\Proform\Block\Buttons;
use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
use Rocknrollsun\Proform\Block\Buttons\GenericButton;
/**
* Class SubmitButton
*/
class SubmitButton extends GenericButton implements ButtonProviderInterface
{
/**
* #return array
*/
public function getButtonData()
{
$data = [
'label' => __('Submit'),
'class' => 'save primary',
'sort_order' => 20,
"data_attribute" => [
"mage-init" => ["button" => ['event'=>'save']],
"form-role" => "save",
]
];
return $data;
}
}
Related
Below is code i use to create a form with a link that opens a modal with a customer grid, the user selects the customers and when the form is submitted the customers are sent with the posted data to the controller which all works.
What i'm struggling to work out is that once the modal is closed and customers are selected, how would i display the names of the selected customers in a div above the form? Right now they are hidden so it's not obvious what has been selected before the form is submitted:
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">
pillbox_textmessaging_campaigns_add_form.campaigns_add_form_data_source
</item>
<item name="deps" xsi:type="string">
pillbox_textmessaging_campaigns_add_form.campaigns_add_form_data_source
</item>
</item>
<item name="label" xsi:type="string" translate="true">Add New Campaign</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">pillbox_textmessaging_campaigns_add_form</item>
</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
<item name="buttons" xsi:type="array">
<item name="save" xsi:type="string">Pillbox\TextMessaging\Block\Adminhtml\Campaigns\Buttons\Save</item>
</item>
</argument>
<dataSource name="campaigns_add_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Pillbox\TextMessaging\Model\Campaigns\FormDataProvider</argument>
<argument name="name" xsi:type="string">campaigns_add_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="*/*/save"/>
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="campaign_information">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Campaign Information</item>
<item name="sortOrder" xsi:type="number">10</item>
</item>
</argument>
<modal name="customers_modal">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="onCancel" xsi:type="string">
actionDone
</item>
<item name="options" xsi:type="array">
<item name="title" xsi:type="string">
All Customers
</item>
<item name="buttons" xsi:type="array">
<item name="0" xsi:type="array">
<item name="text" xsi:type="string">
Selected
</item>
<item name="class" xsi:type="string">
action-primary
</item>
<item name="actions" xsi:type="array">
<item name="0" xsi:type="array">
<item name="targetName" xsi:type="string">
index = customer_listing
</item>
<item name="actionName" xsi:type="string">save</item>
</item>
<item name="1" xsi:type="string">
closeModal
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
<insertListing name="customer_listing">
<settings>
<dataLinks>
<exports>false</exports>
<imports>true</imports>
</dataLinks>
<autoRender>true</autoRender>
<selectionsProvider>
customer_listing.customer_listing.customer_columns.ids
</selectionsProvider>
<dataScope>customer_listing</dataScope>
<ns>customer_listing</ns>
</settings>
</insertListing>
</modal>
<button name="customers_button"
component="Magento_Ui/js/form/components/button">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">
Select Customers
</item>
<item name="title" xsi:type="string" translate="true">
Customers
</item>
<item name="displayAsLink" xsi:type="boolean">true</item>
<item name="labelVisible" xsi:type="boolean">true</item>
<item name="template" xsi:type="string">
ui/form/components/button/container
</item>
<item name="actions" xsi:type="array">
<item name="0" xsi:type="array">
<item name="targetName" xsi:type="string">
pillbox_textmessaging_campaigns_add_form.pillbox_textmessaging_campaigns_add_form.campaign_information.customers_modal
</item>
<item name="actionName" xsi:type="string">
toggleModal
</item>
</item>
</item>
</item>
</argument>
</button>
<field name="name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Campaign Name</item>
<item name="formElement" xsi:type="string">input</item>
<item name="sortOrder" xsi:type="number">10</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="message">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Message Content</item>
<item name="formElement" xsi:type="string">textarea</item>
<item name="sortOrder" xsi:type="number">20</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<htmlContent name="sms_count_html_content">
<argument name="block" xsi:type="object">
Pillbox\TextMessaging\Block\Adminhtml\Shared\HtmlContent\TextFormCountHtml
</argument>
</htmlContent>
<field name="ready_to_send" formElement="checkbox">
<settings>
<label translate="true">Ready To Send?</label>
<tooltip>
<description translate="true">Check the box if you would like to send the campaign immediately.
</description>
</tooltip>
</settings>
<formElements>
<checkbox>
<settings>
<prefer>toggle</prefer>
<valueMap>
<map name="false" xsi:type="boolean">false</map>
<map name="true" xsi:type="boolean">true</map>
</valueMap>
</settings>
</checkbox>
</formElements>
</field>
</fieldset>
</form>
I have created the following XML for our Word CustomUI:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
<ribbon>
<tabs>
<tab idMso="TabHome">
<group idMso="GroupFont" visible="false" />
<group idMso="GroupParagraph" visible="false" />
<group idMso="GroupInsertTables" insertBeforeMso="GroupStyles" />
<group id="CustGrp1" label="Next" insertBeforeMso="GroupStyles">
<toggleButton idMso="AlignLeft" showLabel="false" />
<toggleButton idMso="AlignCenter" showLabel="false" />
<toggleButton idMso="AlignRight" showLabel="false" />
<button idMso="IndentDecreaseWord" showLabel="false" />
<button idMso="IndentIncreaseWord" showLabel="false" />
<gallery idMso="MultilevelListGallery" showLabel="false" />
<gallery idMso="FontColorPicker" showLabel="false" />
<gallery idMso="ShadingColorPicker" showLabel="false" />
<toggleButton idMso="Superscript" showLabel="false" />
<button idMso="SpellingAndGrammar" showLabel="false" />
<splitButton idMso="TableBordersMenu" showLabel="false" />
<button idMso="SymbolsDialog" showLabel="false" />
<button idMso="HyperlinkInsert" showLabel="true" />
<gallery idMso="AutoTextGallery" showLabel="true" />
<button idMso="BookmarkInsert" showLabel="true" />
<button id="ReferenceInsert" label="Referentie" imageMso="CrossReferenceInsert" onAction="modCode.ButtonOnAction" />
<button idMso="ReviewNewComment" showLabel="false" />
<toggleButton idMso="ParagraphMarks" showLabel="false" />
</group>
</tab>
</tabs>
</ribbon>
The HyperlinkInsert button is not visible. Does anybody know what I am doing wrong?
screenshot CustomUI
In the customUI tool I created the following XML:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
<ribbon>
<tabs>
<tab idMso="TabHome">
<group idMso="GroupFont" visible="false" />
<group idMso="GroupParagraph" visible="false" />
<group id="CustGrp1" label="MyGroup" insertBeforeMso="GroupStyles">
<button idMso="TableInsertDialogWord" showLabel="false" />
<button idMso="ConvertTextToTable" showLabel="false" />
<button idMso="SpellingAndGrammar" showLabel="false" />
<button idMso="AlignLeft" showLabel="false" />
<button idMso="AlignCenter" showLabel="false" />
<button idMso="Superscript" showLabel="false" />
<button idMso="HyperlinkInsert" showLabel="false" />
<button idMso="BookmarkInsert" showLabel="false" />
<button idMso="AutoTextInsert" showLabel="false" />
<button idMso="ReviewNewComment" showLabel="false" />
<button idMso="SymbolsDialog" showLabel="false" />
<button idMso="ParagraphMarks" showLabel="false" />
</group>
</tab>
</tabs>
</ribbon>
</customUI>
I hide two groups and add one custom group. In this custom group I add only standard buttons using the proper idMSO (downloaded from MS). In Word I can only see five of the twelve buttons. What's wrong here? Are my id's incorrect?
I am trying out the ionic modal to use for editing an item in my app. on my main screen, i configured a button to open a modal and pass the item details. here's the html code:
<button class = "button button-block" ng-click = "openModal(item)">
<div class="row">
<item class="col col-15">{{item.itemName}} </item>
<item class="col col-15">{{item.brand}} </item>
<item class="col col-5">{{item.size}} </item>
<item class="col col-15">{{item.quantity}}</item>
<item class="col col-15">{{item.threshold}}</item>
</div>
</button>
In my openModal function, I initialize itemdetail to display in my modal as follows:
$scope.openModal = function(item) {
$scope.itemdetail = item;
$scope.modal.show();
};
I am able to display the itemdetail properties in my modal and I have configured 2 fields in the modal as editable:
<form name="inventoryItemModal">
<div class="col">
<item class="row">
<item class="col">Brand : {{itemdetail.brand}} </item>
</item>
<item class="row">
<item class="col">Size : {{itemdetail.size}} </item>
</item>
<item class="row">
<div class= "col"> Quantity :
<input type="number" ng-model="itemdetail.quantity" step="1" max="99999999" ng-change='fieldchanged=true'>
</div>
<div class="col"> Threshold :
<input type="number" ng-model="itemdetail.threshold" min="1" step="1" max="99999999" ng-change='fieldchanged=true'>
</div>
</item>
</div>
<button class = "button button-{{colorTheme}}"
ng-disabled="!inventoryItemModal.$dirty || inventoryItemModal.$invalid "
ng-click = "processItem(itemdetail)">Update</button>
</form>
the problem is when I change the value of the quantity field but then click outside the modal to go back to the main screen, the main screen reflects the value changed in the modal even though I am using different variables in the main screen (item.quantity) and modal screen (itemdetail.quantity). Why is item.quantity changing?
I was able to fix this problem by changing the name of the input field in the modal from quantity to quantitymodal. I don't know why that is but it works.
The asp:menu that I am using is rendering an old table layout. Can someone help me create an unordered list with a nested unordered list for the hover menu. I need the output to render like this:
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link
<ul>
<li></li>
</ul>
</li>
</ul>
XML Data feed looks like this:
<SiteMap>
<item Text="(!menu.Home!)" NavigateUrl="default.aspx" LookId="VertTopItemLook"/>
<item Text="(!menu.Categories!)" LookId="VertTopItemLook" />
<item Text="(!menu.Sections!)" LookId="VertTopItemLook" />
<item Text="(!menu.Manufacturers!)" LookId="VertTopItemLook" />
<item Text="(!menu.CustomerService!)" NavigateUrl="t-service.aspx" LookId="VertTopItemLook">
<MenuItem Text="(!menu.YourAccount!)" NavigateUrl="account.aspx" />
<MenuItem Text="(!menu.OrderHistory!)" NavigateUrl="account.aspx" />
<MenuItem Text="(!menu.FAQs!)" NavigateUrl="t-faq.aspx" />
<MenuItem Text="(!menu.PolicyReturns!)" NavigateUrl="t-returns.aspx" />
<MenuItem Text="(!menu.Shipping!)" NavigateUrl="t-shipping.aspx" />
<MenuItem Text="(!menu.Contact!)" NavigateUrl="t-contact.aspx" />
<MenuItem Text="(!menu.PolicyPrivacy!)" NavigateUrl="t-privacy.aspx" />
<MenuItem Text="(!menu.PolicySecurity!)" NavigateUrl="t-security.aspx" />
</item>
</SiteMap>