How to Add a Custom “Create Language Text” Button in the Language Texts Page (ABP Suite) #10015

3 Answer(s)

• 

  0

  AI-Bot created one year ago

  Support Team ABP Agent

  To add a custom "Create Language Text" button to the Language Texts page in your ABP MVC (Razor Pages) application, follow these steps:

  1. Extend the Page Toolbar with a Custom Button

  In your Web module's ConfigureServices method, use the ABP Page Toolbar Extensions to add a new button to the Language Texts page toolbar:

  Configure<AbpPageToolbarOptions>(options =>
  {
      options.Configure<Volo.Abp.LanguageManagement.Web.Pages.LanguageManagement.LanguageTexts.IndexModel>(toolbar =>
      {
          toolbar.AddButton(
              LocalizableString.Create<YourResource>("CreateLanguageText"),
              icon: "plus",
              id: "CreateLanguageTextButton",
              type: AbpButtonType.Primary
          );
      });
  });
  

  • Add the "CreateLanguageText" string to your localization files.

  2. Add the Modal or Redirect Logic

  • In your Index.cshtml (or the corresponding Razor Page), add JavaScript to handle the button click. You can use ABP's modal helpers or redirect to a custom create page.

  Example for opening a modal (using Bootstrap/ABP modal):

  $(function () {
      $('#CreateLanguageTextButton').click(function () {
          abp.modals.open({
              title: 'Create Language Text',
              size: 'lg',
              bodyUrl: '/LanguageManagement/LanguageTexts/CreateModal'
          });
      });
  });
  

  3. Create the Modal or Create Page

  • Add a new Razor Page (e.g., CreateModal.cshtml) under /Pages/LanguageManagement/LanguageTexts/.
  • The page should contain a form with fields: Resource Name (dropdown), Culture Name (dropdown), Name (key), and Value.
  • On form submission, call the backend API (PUT /api/language-management/language-texts) using AJAX or ABP's form helpers.

  Example form (simplified):

  <form id="createLanguageTextForm">
      <!-- Resource Name dropdown -->
      <!-- Culture Name dropdown -->
      <!-- Name (key) input -->
      <!-- Value input -->
      <button type="submit" class="btn btn-primary">Save</button>
  </form>
  <script>
      $('#createLanguageTextForm').submit(function (e) {
          e.preventDefault();
          // Collect form data
          // Call the API using abp.ajax or $.ajax
      });
  </script>
  

  4. Backend API Usage

  • Use ILanguageTextAppService.UpdateAsync() in your backend to create or update the language text.
  • The API endpoint is already available in ABP Language Management module.

  5. Reusable Components

  • There is no built-in ABP modal for creating language texts, but you can reuse ABP's form and modal helpers for consistency.
  • For reference on converting modals to pages or customizing modals, see the community article below.

  ---

  Sources:

  • Page Toolbar Extensions (Official ABP Docs)
  • Converting Create/Edit Modal to Page (Community Article)

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  Vipinthachinari created one year ago

  When I use the above code, it creates a button on the /Pages/LanguageManagement view, which is used to create a new language. However, the below code creates a button on the /Pages/LanguageManagement/Texts page:

      Configure<AbpPageToolbarOptions>(options =>
      {
          options.Configure<Volo.Abp.LanguageManagement.Pages.LanguageManagement.Texts.IndexModel>(toolbar =>
          {
              toolbar.AddButton(
                  LocalizableString.Create<QueuingSystemAppResource>("CreateLanguageText"),
                  icon: "plus",
                  id: "CreateLanguageTextButton",
                  type: AbpButtonType.Primary
              );
          });
      });
  

  Since the application is created using ABP Suite, there is no visible /Pages/LanguageManagement/Texts/Index.cshtml file in the web project. So, where should I place the button click and related logic?

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created one year ago

  Support Team Fullstack Developer

  hi

  You can add a custom JavaScript file to the wwwroot folder and add it to typeof(Volo.Abp.LanguageManagement.Pages.LanguageManagement.Texts.IndexModel).FullName bundle

  See https://abp.io/docs/latest/framework/ui/mvc-razor-pages/bundling-minification#configuring-an-existing-bundle

  Thanks.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel