I'm building an app with react-admin, I have an organizations resource and programs resource.
each program has relation to one organization.
(saved in mongoDB anf I have a node server)
I created a custom list to organizations resource.
<List {...props}>
<Datagrid rowClick={programsRowClick}>
<TextField source="name" />
<EditButton />
</Datagrid>
</List>
I want when we click on organization row to recieve all the programs that have the same organizationId.
the API is: https://localhost:4000/api/organization/${id}/programs
I tried to create a custom function programsRowClick but I dont realy understand what should it return?
the react run on https://localhost:3000
the server run on https://localhost:4000/api
could you help me?
thank's!
Maybe this can help you :
https://marmelab.com/react-admin/List.html#expand
It allows you to display a custom component in the list on row click.
Otherwise rowClick accept a function which returns a path.
ie :
<RA.Datagrid rowClick={(id: RA.Identifier) => `/${resource}/${id}/${customRoute}`}>
Related
I have the following code block in a blazor winform and i'm trying to add a button with an on click event to the id field to edit that row's data in a new form but after scouring documentation I cannot find a way to do this that isn't just changing the fields in the table directly.
<SfGrid DataSource="#Customers" RowHeight="20" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
<GridPageSettings PageSize="50"></GridPageSettings>
<GridColumns>
<GridColumn Field=#nameof(Customer.Id) HeaderText="Id" Width="120"></GridColumn>
<GridColumn Field=#nameof(Customer.Name) HeaderText="Name" Width="120"></GridColumn>
<GridColumn Field=#nameof(Customer.Email) HeaderText="Email" Width="120"></GridColumn>
<GridColumn Field=#nameof(Customer.Password) HeaderText="Password" Width="120"</GridColumn>
</GridColumns>
</SfGrid>
I have only tried to accomplish this by creating an onclick event as you would in a traditional html table but I don't believe this can be accomplished within a data grid.
Using Template you can mainly fully customize the content of a GridColumn:
...
<GridColumn HeaderText="Actions" TextAlign="TextAlign.Center" Width="120">
<Template>
#{
Customer customer = (context as Customer);
<button #onclick="() => OpenEditCustomerForm(customer)">Edit</button>
}
</Template>
</GridColumn>
...
Documentation
As per your needs, I suggest using the grid column's column template feature, which allows you to customize your needs. Please refer to the UG documentation mentioned below for your reference.
Documentation: https://blazor.syncfusion.com/documentation/datagrid/column-template
I am trying to make "required" a TextField in select mode.
I tried to add required prop like in this snippet, but this does not block the submit event if I haven't select anything. Although it adds the '*' to the label.
Please check this sandbox
<TextField
id="select-currency"
select
label="Select"
value={this.state.currency}
onChange={this.handleChange("currency")}
required
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
UPDATE: (Clarification really)
I am talking about html5 validation. In the sandbox example there are Select and Text fields, setting the text field as required will block the submit event and displays a native html5 error saying "this field is required", this is not the case if the field is "select".
Material Ui provides another component Native Select to handle this kind of native validation.
Please check this example
It was recently implemented in material ui. If you upgrade #material-ui/core to version 4.11.0 it will work https://github.com/mui-org/material-ui/issues/20402
It's not field responsibility to control form behavoiur. It's parent-child relation and top-down data passing.
Form (component) provides current value to component (validity information, change handler) to field component. Field displays content using styles and elements depending on props (* when required, error border etc) but it's form' role to decide about value/validity/submiting.
I am using react-bootstrap-wizard in which I need to call a function on next button and previous button on every specific tab form. How can I call a function then ?
<ReactWizard
steps={steps}
navSteps
title=""
subtitle=""
headerTextCenter
validate
color="primary"
finishButtonText="Submit"
finishButtonClick={this.createCreator}
/>
Here all steps are rendered, now i need to call a function on NEXT and PREVIOUS buttons on specific step ?
Looking at the source code library doesn't allow you to handle previous/next-ButtonClick events.
You will need to file a feature request or create pull request yourself.
I have made an adf tree but I am not able to add links to each child node.
You didn't mentioned that whether or not you are in WebCenter Portal application. But if you are in Portal Application you can take help of NavigationContext for navigation, you can find more information and examples in the documentation. Also you can use NavigationContext from backing bean. You could define actionListener of your commandLink and from that method you can navigate to the various pages from backend as well as from the jspx page.
If you are not in Portal application, in Fusion Web Application you should define your navigation by control-flow-case of adfc-config.xml. Don't use FacesConfig for navigation. Read this documentation to know how navigation system works.
Since you are in a Tree Model and if you need to parameter then you can set some value to session as:
<af:tree value="#{ConnectorTest.model}" var="node" >
<af:commandLink text="#{node.text}" action="#{node.action}">
<af:setPropertyListener from="#{node.value}" to="#{sessionScope.value}" type="action"/>
</af:commandLink>
</af:tree>
here the action will be defined in adfc-config. If you don't need to pass parameter then ignore the af:setPropertyListener but you should define the action in config file.
Hope this will help.
Edit:
Suppose you have two pages: Page1.jspx and Page2.jspx. Now you need to define the action (specifically from-action) in adfc-config.xml as following way:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<adfc-config xmlns="http://xmlns.oracle.com/adf/controller" version="1.2">
<view id="p1">
<page>/path-to-the/Page1.jspx</page>
</view>
<view id="p2">
<page>/path-to-the/Page2.jspx</page>
</view>
<control-flow-rule>
<from-activity-id>p1</from-activity-id>
<control-flow-case>
<from-outcome>goToP2</from-outcome>
<to-activity-id>p2</to-activity-id>
</control-flow-case>
</control-flow-rule>
</adfc-config>
Now if you have a commandLink:
<af:commandLink id="link" action="goToP2" /> will navigate you to the Page2.jspx. The action attribute also accept el expression.
Have u mean to add hyperlink on child node?
<af:tree var="node" value="#{myBean.myTree.root}" id="t1" focusListener="#{myBean.eventMethod}">
<af:commandLink text="#{node.firstname}" />
</af:tree>
when u click on node it fire focus event and call method eventMethod that accepts FocusEvent obj as arguments, in this method u set navigation rule etc etc.....
try it
You can use the <af:switcher> tag, if you want to display different action, for different child nodes
I have a custom link on the opportunity object which points to an external site. Is it possible to add this custom link to a visualforce page?
The solution I came up with was to copy the url salesforce creates for this custom link, and paste it in the page. It looks something like this:
my custom link
This works fine, however, it won't work once it's in a managed package installed on other servers because the lid param will be different (the custom link id). Is there a solution for this?
Have you thought about putting the URL of the link in a field on the opportunity object and then creating an output link on your VF page?
Paul
Look under $Action. Buttons and links are available via that global variable. For example $Action.Opportunity.CustomLink
To build off the answer from danieljimenez, the $Action global variable provides access to the button/link objects. From there you need to use the URLFOR function to get it into a usable form. Then you can either put it into the action param of a command button, or use it as you'd like anywhere else in your markup.
<apex:commandButton action="{!URLFOR($Action.My_Obj__c.My_custom_link)}" value="My custom button"/>
or
My link
create New Contact (Salesforce button target _blank)
<apex:commandLink target="_blank"
styleClass="btn"
style="text-decoration:none;padding:4px;"
action="{!URLFOR($Action.Contact.NewContact)}"
value="Create New Contact" />