I have a React app and I want to generate a word document using a partially template using the information a user fills in the input form. So for example:
There is a template word document:
My name is {firstname} and i live at {address}.
The form is something like
<View>
<TextInput
value={this.state.firstname}
placeholder={'firstname'}
/>
<TextInput
value={this.state.address}
placeholder={'Address'}
/>
</View>
I understand redocx can be used to generate something like this but can redocx be used on template/partially documents that already have words on them and require only user inputs in the app to be completed and then generated. Is there a way this can be achieved using react native.
Related
I have a list of custom filters for a basic list in react-admin like this:
const ClientListsFilter = (props: FilterProps): JSX.Element => {
return (
<Filter {...props}>
<TextInput label="First Name" source="firstName" resettable />
<TextInput label="Last Name" source="lastName" resettable />
<TextInput label="E-Mail" source="email" resettable />
<QuickFilter label="Has Event Accepted" source="hasEventAccepted" defaultValue={true} />
</Filter>
)
}
When I selected now the QuickFilter "Has Event Accepted" it adds the following to the query: hasEventAccepted%22%3Atrue which is to be expected.
Now, I want to add multiple such "Has Event XYZ" QuickFilters, but instead of having a pair for each in the query it would make sense to just have a list like hasEvents=[1,2,3]
Is there a way to achieve this in react-admin? How could I combine multiple values so that a QuickFilter will add directly multiple such events?
Using the <Filter> component, you can't - it doesn't support your use case.
So you have 2 options:
Write a custom Filter component that does what you want
Name each quick filter in a different way (e.g. hasEventAccepted, hasEventDeclined, etc.), and convert them to a single hasEvent query parameter in your dataProvider.getList() code.
We have a ReactJs web application and we are taking some data through of input field but the problem is sometimes this field fills data automatically
For more specification, this problem happens when we are using Oppo and Redmi(OS) but for other OS it's working as normal
For more clear understanding, we made a video using Redmi mobile phone, and here is the video link, Please have a look at the video from the link.
https://drive.google.com/file/d/1yo03CjqeV9iFXgtSH-ff7zgH1hJq60BY/view?usp=sharing
Here is the input field code
// Formik Field
<Field name={name}>
{({ field }: any) => {
return (
<input
{...rest}
{...field}
id={name}
type="text"
autoComplete="off" // we use before off= boolean
value={values.data}
placeholder="Input data"
className={`appoint-input-box ${errors && touched ? " error-red-400" : null}`}
onChange={async (event) => {
handleFiend(event);
setFieldValue("data", event.value.toLowerCase());
}}
/>
);
}}
</Field>
As we said before, this is a ReactJs web app but for form handling we use Formik and this is a text-type input field also this form is a child form, it has a parent form as a controller.
Now we have autoComplete="off" but before we use boolean and top label form we also use the same.
We are hoping, that the provided information is describing properly the exact issue.
If someone expert can guide us on what to do then it's will really pleasure
Thanks
Internazionaleauto
I am trying to create a video conference, what I need is to join the room by entering a link to the textbox.
Right now, I have able to get the textbox value but the problem is I cannot go to another link. Can anyone help me with this?
function Home(){
const [data,setData] = useState(null)
const [print, setPrint] = useState(false);
function getData(val){
setData(val.target.value)
setPrint(false)
}
return(
<React.Fragment>
<h3>Welcome, Instructor</h3>
<hr />
{
print?
<h1>{data}</h1>
:null
}
{/* Link supposed to be here */}
<TextField label="Room ID" onChange={getData} />
<hr/>
<Button variant="contained" color="primary" onClick={() => setPrint(true)}>JOIN ROOM</Button>
</React.Fragment>
)
}
export default Home;
You can use Link in react-router-dom
<Link to={`/${data}`}>Join</Link>
<TextField label="Room ID" onChange={getData} />
What you specifically need, is using the textbox information, you want to generate dynamic links.
In such a case, we can be certain that, we need to use the dynamic information to create the link, which can be achieved either by concatenation
const name = "Mike";
console.log("Hello" + name); // Hello Mike
or you can use string interpolation / templating
const name = "Mike";
console.log(`Hello` ${name}`); // Hello Mike
Both of these are Javascript features and have nothing to do with React specifically.
The React specific information here is, whenever variables inside JSX part of components change, re-renders are caused and thus links will be updated.
So, anything like <a href=`https://example.com/some/random/${stateVariable}/chat` />
I have been given some feedback on some code.
The feedback: "no accessibility or validation has been considered for the search form"
Heres the code:
export const Search = () => {
const [searchTerm, setSearchTerm] = useState('');
return (
<form className={styles.search} onSubmit={handleSubmit}>
<input
type='text'
id='search'
name='search'
onChange={handleChange}
value={searchTerm || ''}
placeholder='search'
/>
<button className='btn' type='submit' onClick={handleSubmit}>
Search
</button>
</form>
);
};
After searching I cannot find anything else extra to add. I thought that forms and buttons have default accessibility.
I'm trying to learn how to add extra accessibility and validation to this form as I believe it is important to encourage use good accessibility practise. Any guidance would be great.
P.S the code is in React treat it like html and JavaScript if your'e unfamiliar.
First, you can identify this form as a search landmark for assistive technology with the use of role="search". Using the search landmark will help assistive technology to "read" the user that this is a search option and screen readers also have an option to navigate to this section directly instead of navigating through all the elements on the page.
Search role landmark info on MDN
Secondly, all modern browsers support the input type="search", that works exactly as type="text" but helps with autocomplete option across domains, helping users with dyslexia not making mistakes when they need to use this option.
Input type search info on MDN
Third, like TJ answered, labels for user control elements like inputs are important for blind people. Screen readers "read" the values of these fields, if there is no label it can be confusing what should they fill there. You can use the element with the for="someID" attribute, or you can use aria-label="labelText" attribute to add label for assistive technology. Although some of the screen readers will use the placeholder as the label when the value is empty, you can't use it as a label.
Labeling controls info on W3C-WAI
Fourth, consider the validation, if it is not the default HTML5 validation, you need to let the user know about any errors so he can correct the mistakes. You can use an element like span with role="alert" or role="status" or use some tooltip open (just to cover more disabilities) to inform the user about errors and suggestions on how to correct them.
Accessible form validation article on WebAIM
In matter of form validation, you can use the HTML5 validation like TJ answered using the input attributes required/pattern/etc. or use your own business logic to validate the form in the handleSubmit function you write.
My code suggestion:
export const Search = () => {
const [searchTerm, setSearchTerm] = useState('');
return (
<form role='search' className={styles.search} onSubmit={handleSubmit}>
<input
type='search'
id='search'
name='search'
onChange={handleChange}
value={searchTerm || ''}
placeholder='search'
aria-label='Enter your search term'
required={true}
/>
<span className='errMsg' role='status'>Error message here</span> {/*use CSS to show and hide msg*/}
<button className='btn' type='submit' onClick={handleSubmit}>
Search
</button>
</form>
);
};
Only accessibility issue I can notice is placeholder='search'. You should always use a <label for="">, placeholder is just a complimentary feature for normal people.
For validation you prob need required since it is the only <input>. You might also need min/max/pattern etc but that's up to you.
<label for="search">Search<label>
<input
type='text'
id='search'
name='search'
onChange={handleChange}
value={searchTerm || ''}
placeholder='search'
required
/>
How do I display multiline text in editable textbox on device screen? At the moment, if the text is not editable then it shows the full text in multiline. The same value is displayed in 2 textboxes, one is editable and one is non-editable.
<groupitem id="WorkExecution.groupitem_1">
<text cssClass="richText" editable="false"
id="WorkExecution.groupitem_1_abc" resourceAttribute="abc"/>
</groupitem>
<groupitem id="WorkExecution.groupitem_2">
<text cssClass="richText" editable="true"
id="WorkExecution.groupitem_2_xyz" placeHolder="Tap to enter"
resourceAttribute="xyz"/>
</groupitem>
e.g. if the value reads -
IBM® Maximo® Anywhere gives you remote access from most mobile devices to Maximo Asset Management processes – work and asset management. It is built with an interface that is customizable, so you can create your own assets.
then the value of abc is displayed properly in multiline format whereas value of xyz is displayed in a single line and not in multiline.
Do I need to apply any CSS here?
In the OOB app.xml if you look at the view
<view editableView="WorkExecution.NewWorkLogView" id="WorkExecution.WorkLogDetailView" label="Work Log Entry">
You will see the multi line editable detail attribute near the bottom
<groupitem id="WorkExecution.WorkLogDetailView_workOrder_groupitem_5">
<text cssClass="richText" editable="false" id="WorkExecution.WorkLogDetailView_workOrder_groupitem_5_details_Details" label="Details" resourceAttribute="details"/>
</groupitem>
As you already have the editable and css attributes set, my guess is that on your view it is not defined as an editableView.
For a editable multiline widget you need to use the textarea widget. See our WorkLog details page in 7.5.2 for an example.
<groupitem id="WorkExecution.NewWorkLogView_workOrder_groupitem_5">
<textarea editable="true" id="WorkExecution.NewWorkLogView_details_0" label="Work Log Details" placeHolder="Tap to enter" resourceAttribute="details"/>
</groupitem>