create user and edit user as a new page instead of pop up #12390

1 Answer(s)

• 

  0

  oguzhanagir created 22 days ago

  Support Team

  Hi @Prasanthtp

  To create a non-modal CRUD page, you can enable the Non-Modal CRUD Page feature in Power Tools when creating a new entity. In this way, CRUD pages are created on separate pages. However, if you want to edit previously created pages non-modally, you need to make manual changes here. You need to follow the steps below.

  1. Routing & Navigation Changes
     Currently, the Add/Edit User operations open in a modal. To open them in a new page instead:

  a) Add a New Route to the Users Page
  Add new actions CreateOrEdit, UserPermissions, and ExcelExport in UsersController.cs.

  2. Create New Page Views and Javascript
     Create three separate pages: CreateOrEdit, UserPermissions, and ExcelExport. Update the content from the previous modal structure to a format similar to the following.

  Example CreateOrEdit.cshtml Code

  @{
      ViewBag.CurrentPageName = AppPageNames.Common.Users;
  }
  @section Scripts
  {
      < script abp-src="/view-resources/Areas/App/Views/Users/CreateOrEdit.js" asp-append-version="true">
  }
  
  
  @{
      var breadcrumbs = new List()
      {
          new BreadcrumbItem("/App/Users", L("Users")),
          new BreadcrumbItem(Model.IsEditMode ? L("Edit") : L("Create"))
      };
  }
  
  < abp-page-subheader title='@(Model.IsEditMode ? (L("EditUser")) : L("CreateNewUser"))' breadcrumbs="breadcrumbs">
  < /abp-page-subheader>
  
  
  < div class="@(await GetContainerClass())">
      < div class="card card-custom gutter-b">
          < form name="UserInformationsForm" role="form" novalidate class="form-validation">
              < div class="card-body">
                  < div class="form">
                      < div id="UserInformationsTab">
                          @if (Model.IsEditMode)
                          {
                              < input type="hidden" name="id" value="@Model.User.Id" />
                          }
  
                          < div class="my-3">
                              < label class="form-label" for="User_Name">@L("Name")
                              < input class="form-control" id="User_Name" value="@Model.User.Name" type="text" name="name" />
                          < /div>
  
                          //Other fields
  
                      < /div>
                  < /div>
              < /div>
              < div class="card-footer">
                  < div class="row align-items-center">
                      < div class="col-lg-12">
                          < button type="button" id="saveBtn" class="btn btn-success float-right">< i class="fa fa-save"> @L("Save")
                          @if (!Model.IsEditMode)
                          {
                              < button type="button" id="saveAndNewBtn" class="btn btn-success float-right">< i class="fa fa-save"> @L("SaveAndNew")
                          }
                      < /div>
                  < /div>
              < /div>
          < /form>
      < /div>
  < /div>
  
  

  This is a sample code. Depending on the general structure, there will be additional operations for the CreateOrEditUser page. You need to update the other pages in a similar manner.

  At the same time, you need to update the javascript files of the modals in a non-modal manner. There will be no need to use a ModalManager for this. You need to update the javascript files with the previous modal structure by following the sample code below.

  Example Code

  (function () {
    $(function () {
      var _usersService = abp.services.app.users;
  
      var _$userInformationForm = $('form[name=UserInformationsForm]');
      _$userInformationForm.validate();
  
      $('.date-picker').daterangepicker(app.createDateTimePickerOptions());
  
      function save(successCallback) {
        if (!_$userInformationForm.valid()) {
          return;
        }
  
        var user = _$userInformationForm.serializeFormToObject();
  
        abp.ui.setBusy();
        _usersService.createOrEdit(
          user
        ).done(function () {
          abp.notify.info(app.localize('SavedSuccessfully'));
          abp.event.trigger('app.createOrEditUserModalSaved');
  
          if (typeof (successCallback) === 'function') {
            successCallback();
          }
        }).always(function () {
          abp.ui.clearBusy();
        });
      };
  
      function clearForm() {
        _$userInformationForm[0].reset();
      }
  
      $('#saveBtn').click(function () {
        save(function () {
          window.location = "/App/Users";
        });
      });
  
      $('#saveAndNewBtn').click(function () {
        save(function () {
          if (!$('input[name=id]').val()) {//if it is create page
            clearForm();
          }
        });
      });
  
  
    });
  })();
  

  This part is again a sample code. You can update the CreateOrEdit User javascript file to be non-modal with the same logic structure.

  3. Update Modal Openings in Index.js
     In the JavaScript file, update the datatable row action section. Instead of opening modals using the modal manager, modify it to navigate to the newly created pages.

  Old

  {
      text: app.localize('Edit'),
      visible: function () {
          return _permissions.edit;
      },
      action: function (data) {
          _createOrEditModal.open({ id: data.record.id });
      },
  },
  

  New

  {
    text: app.localize('Edit'),
    visible: function () {
      return _permissions.edit;
    },
    action: function (data) {
      window.location = "/App/Users/CreateOrEdit/" + data.record.id;
    }
  },
  

  Note: You can update the steps given here to have the same structure in other business logics created for Users. Sample codes were created based on the CreateOrEdit page.

  Save Cancel