jsf show values of entity in inputs when edit

Question

I have a product list, and when I press "edit product" it redirects to editProduct.xhtml and I want to see values of chosen entity in inputs (with those i get from getRequest). I have an inputHidden and metadata and f:param but I probably use it wrong so it doesn't work.

productList.xhtml

<f:view>

    <h:body>

        <ui:composition template="template.xhtml">
        <ui:define name="content">

            <h:form id="productForm">
                <h:dataTable id="productTable"
                             class="table table-hover"
                             var="product"
                             value = "#{listProductController.getProductListForUser()}">

                            <h:column>
                                <f:facet name = "header">Id: </f:facet>
                                     #{product.id}
                            </h:column>


                    <h:column>
                        <f:facet name = "header">Title: </f:facet>
                        <h:outputLabel value="#{product.title}"
                                          />
                    </h:column>



                            <h:column>
                                <f:facet name = "header">Category:</f:facet>
                            #{product.category.name}
                            </h:column>

                            <h:column>
                                <f:facet name = "header">Description:</f:facet>
                                <h:outputText value="#{product.description}"
                                             />
                            </h:column>

                            <h:column>
                                <f:facet name = "header">Pictures:</f:facet>
                                <ui:repeat var="picture" value="#{listProductController.getFirstPicByProductId(product.id)}">
                                    <h:graphicImage value = "#{picture.link}" height="60px" width="60px" alt="Image not found"/>
                                </ui:repeat >
                            </h:column>

                            <h:column>
                                <f:facet name = "header">Parameters:</f:facet>
                                <ui:repeat var="productParametr" value="#{listProductController.getParamByProductId(product.id)}">
                                <h:outputText value="#{productParametr.parameter.value} : #{productParametr.value}"
                                             />
                                </ui:repeat>
                            </h:column>

                            <h:column>
                                <f:facet name = "header">Price:</f:facet>
                                <h:outputText value="#{product.price}" />
                            </h:column>


                                <h:column>
                                    <f:facet name = "header">Edit:</f:facet>
                               <h:commandButton value = "Edit Product"
                                                action = "#{productController.edit()}"
                               >
                                    <f:param name="id" value="#{productController.getAddRequest().id}"/>
                               </h:commandButton>
                                </h:column>

                </h:dataTable>
            <br/>

            </h:form>
</ui:define>
        </ui:composition>
    </h:body>
</f:view>

editProduct.xhtml

<f:view>

    <f:metadata>
        <f:viewParam name="id" value="#{productController.getAddRequest().id}"/>
    </f:metadata>

    <h:body>

        <ui:composition template="template.xhtml">
            <ui:define name="content">

                <h:form>

                    <h:inputHidden value="#{productController.getAddRequest().id}" />

                    <div class="wrap-login100" align="center">
                        <h:outputLabel for="id" value = "Id: "/>
                        #{productController.getAddRequest().id}
                    </div>

                    <div class="wrap-login100" align="center">
                        <h:outputLabel for="title" value = "Title: "/>
                            <h:inputText id="title" value="#{productController.getAddRequest().title}"/>
                        </div>



                    <div class="wrap-login100" align="center">
                        <h:outputLabel for="description" value = "Description: "/>
                        <h:inputText id="description" value="#{productController.getAddRequest().description}"/>
                    </div>


                    <div class="wrap-login100" align="center">
                        <h:outputLabel for="price" value = "Price: "/>
                            <h:inputText id="price" value="#{productController.getAddRequest().price}" />
                    </div>


                    <div class="wrap-login100" align="center">
                            <h:commandButton value = "Edit Product"
                                             action = "#{productController.editProduct()}"
                            >
                            </h:commandButton>
                    </div>

                    <br/>

                </h:form>

            </ui:define>
        </ui:composition>
    </h:body>
</f:view>